@rematter/pylon-react-native 0.1.4

package/android/src/main/java/com/pylon/chatwidget/PylonChatController.kt

@@ -0,0 +1,63 @@
+package com.pylon.chatwidget
+
+/**
+ * Lightweight handle returned by [Pylon.createChat] so developers can interact
+ * with the underlying [PylonChat] view without keeping a direct reference to
+ * the view class (useful when wiring things in Jetpack Compose or XML layouts).
+ */
+class PylonChatController internal constructor(
+    val view: PylonChat
+) {
+
+    fun setListener(listener: PylonChatListener?) {
+        view.setListener(listener)
+    }
+
+    fun openChat() {
+        view.openChat()
+    }
+
+    fun closeChat() {
+        view.closeChat()
+    }
+
+    fun showChatBubble() {
+        view.showChatBubble()
+    }
+
+    fun hideChatBubble() {
+        view.hideChatBubble()
+    }
+
+    fun updateUser(user: PylonUser) {
+        view.updateUser(user)
+    }
+
+    fun setNewIssueCustomFields(fields: Map<String, Any?>) {
+        view.setNewIssueCustomFields(fields)
+    }
+
+    fun setTicketFormFields(fields: Map<String, Any?>) {
+        view.setTicketFormFields(fields)
+    }
+
+    fun showNewMessage(message: String, isHtml: Boolean = false) {
+        view.showNewMessage(message, isHtml)
+    }
+
+    fun showTicketForm(ticketFormSlug: String) {
+        view.showTicketForm(ticketFormSlug)
+    }
+
+    fun showKnowledgeBaseArticle(articleId: String) {
+        view.showKnowledgeBaseArticle(articleId)
+    }
+
+    fun setEmailHash(emailHash: String?) {
+        view.updateEmailHash(emailHash)
+    }
+
+    fun destroy() {
+        view.destroy()
+    }
+}

package/android/src/main/java/com/pylon/chatwidget/PylonChatListener.kt

@@ -0,0 +1,76 @@
+package com.pylon.chatwidget
+
+/**
+ * Listener interface for Pylon widget events
+ */
+interface PylonChatListener {
+    /**
+     * Called when the Pylon widget has finished loading
+     */
+    fun onPylonLoaded()
+
+    /**
+     * Called when Pylon is initialized with user data
+     */
+    fun onPylonInitialized()
+
+    /**
+     * Called when Pylon JavaScript is ready
+     */
+    fun onPylonReady()
+
+    /**
+     * Called when a message is received
+     */
+    fun onMessageReceived(message: String)
+
+    /**
+     * Called when the chat is opened
+     */
+    fun onChatOpened()
+
+    /**
+     * Called when the chat is closed
+     */
+    fun onChatClosed()
+
+    /**
+     * Called when there's an error loading Pylon
+     */
+    fun onPylonError(error: String)
+
+    /**
+     * Called when a file chooser is launched.
+     * This is only called when PylonChat is used from a non-Activity context.
+     *
+     * Developers can simply forward activity results to [Pylon.handleActivityResult]
+     * and ignore request codes altogether. The provided request code is only kept
+     * for backwards compatibility.
+     *
+     * @param requestCode The legacy request code identifier.
+     */
+    fun onFileChooserLaunched(requestCode: Int) {
+        // Default implementation - can be overridden if needed
+    }
+
+    /**
+     * Called whenever the unread message count changes.
+     */
+    fun onUnreadCountChanged(unreadCount: Int) {
+        // Default implementation - can be overridden if needed
+    }
+
+    /**
+     * Called whenever interactive element bounds change.
+     * Used by React Native to position proxy touch targets.
+     *
+     * @param selector The CSS selector of the interactive element
+     * @param left The left coordinate in pixels
+     * @param top The top coordinate in pixels
+     * @param right The right coordinate in pixels
+     * @param bottom The bottom coordinate in pixels
+     */
+    fun onInteractiveBoundsChanged(selector: String, left: Float, top: Float, right: Float, bottom: Float) {
+        // Default implementation - can be overridden if needed
+    }
+}

package/android/src/main/java/com/pylon/chatwidget/PylonChatView.kt

@@ -0,0 +1,7 @@
+package com.pylon.chatwidget
+
+// Typealias for compatibility with React Native bridge.
+// The Android SDK uses PylonChat, while iOS uses PylonChatView.
+// This allows the RN bridge to use a consistent name across platforms.
+typealias PylonChatView = PylonChat
+

package/android/src/main/java/com/pylon/chatwidget/PylonConfig.kt

@@ -0,0 +1,62 @@
+package com.pylon.chatwidget
+
+import java.net.URLEncoder
+
+/**
+ * Immutable configuration for the Pylon SDK. Use the [Builder] to customise
+ * the settings and pass the result to [Pylon.initialize].
+ */
+data class PylonConfig internal constructor(
+    val appId: String,
+    val enableLogging: Boolean,
+    val primaryColor: String?,
+    val debugMode: Boolean,
+    val widgetBaseUrl: String,
+    val widgetScriptUrl: String
+) {
+
+    class Builder internal constructor(private val appId: String) {
+        var enableLogging: Boolean = true
+        var primaryColor: String? = null
+        var debugMode: Boolean = false
+        var widgetBaseUrl: String = DEFAULT_WIDGET_BASE_URL
+        var widgetScriptUrl: String = defaultScriptUrl(appId)
+
+        internal fun build(): PylonConfig {
+            val scriptUrl = widgetScriptUrl.ifBlank { defaultScriptUrl(appId) }
+            return PylonConfig(
+                appId = appId,
+                enableLogging = enableLogging,
+                primaryColor = primaryColor,
+                debugMode = debugMode,
+                widgetBaseUrl = widgetBaseUrl.ifBlank { DEFAULT_WIDGET_BASE_URL },
+                widgetScriptUrl = scriptUrl
+            )
+        }
+    }
+
+    companion object {
+        private const val DEFAULT_WIDGET_BASE_URL = "https://widget.usepylon.com"
+
+        private fun defaultScriptUrl(appId: String): String {
+            val encodedAppId = URLEncoder.encode(appId, "UTF-8")
+            return "$DEFAULT_WIDGET_BASE_URL/widget/$encodedAppId"
+        }
+
+        fun build(appId: String, block: Builder.() -> Unit = {}): PylonConfig {
+            return Builder(appId).apply(block).build()
+        }
+
+        fun from(existing: PylonConfig, block: Builder.() -> Unit): PylonConfig {
+            val builder = Builder(existing.appId).apply {
+                enableLogging = existing.enableLogging
+                primaryColor = existing.primaryColor
+                debugMode = existing.debugMode
+                widgetBaseUrl = existing.widgetBaseUrl
+                widgetScriptUrl = existing.widgetScriptUrl
+            }
+            builder.block()
+            return builder.build()
+        }
+    }
+}

package/android/src/main/java/com/pylon/chatwidget/PylonDebugView.kt

@@ -0,0 +1,76 @@
+package com.pylon.chatwidget
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.Rect
+import android.view.View
+
+class DebugOverlayView(context: Context) : View(context) {
+    private val paint = Paint().apply {
+        style = Paint.Style.STROKE
+        strokeWidth = 4f
+    }
+
+    private val fillPaint = Paint().apply {
+        style = Paint.Style.FILL
+    }
+
+    private val textPaint = Paint().apply {
+        textSize = 24f
+        isAntiAlias = true
+        setShadowLayer(2f, 0f, 0f, Color.BLACK) // Add shadow for readability
+    }
+
+    var bounds: Map<String, Rect> = emptyMap()
+        set(value) {
+            field = value
+            invalidate() // Trigger redraw
+        }
+
+    override fun onDraw(canvas: Canvas) {
+        super.onDraw(canvas)
+
+        bounds.forEach { (selector, rect) ->
+            if (!rect.isEmpty) {
+                val color = getColorForSelector(selector)
+
+                // Update paint colors
+                fillPaint.color = Color.argb(30, Color.red(color), Color.green(color), Color.blue(color))
+                paint.color = color
+                textPaint.color = color
+
+                // Draw filled rectangle
+                canvas.drawRect(rect, fillPaint)
+                // Draw border
+                canvas.drawRect(rect, paint)
+                // Draw label
+                canvas.drawText(
+                    selector,
+                    rect.left.toFloat(),
+                    rect.top.toFloat() - 10f,
+                    textPaint
+                )
+            }
+        }
+    }
+
+    private fun getColorForSelector(selector: String): Int {
+        // Generate consistent color from string hash
+        val hash = selector.hashCode()
+
+        // Use HSV to ensure colors are vibrant and distinct
+        val hue = (hash and 0xFFFF) % 360f // 0-359 degrees
+        val saturation = 0.7f + ((hash shr 16) and 0xFF) / 255f * 0.3f // 0.7-1.0
+        val value = 0.8f + ((hash shr 24) and 0xFF) / 255f * 0.2f // 0.8-1.0
+
+        return Color.HSVToColor(floatArrayOf(hue, saturation, value))
+    }
+
+    init {
+        setWillNotDraw(false) // Enable drawing
+        isClickable = false
+        isFocusable = false
+    }
+}

package/android/src/main/java/com/pylon/chatwidget/PylonUser.kt

@@ -0,0 +1,41 @@
+package com.pylon.chatwidget
+
+/**
+ * User information for Pylon Chat
+ */
+data class PylonUser(
+    val email: String,
+    val name: String,
+    val avatarUrl: String? = null,
+    val emailHash: String? = null,
+    val accountId: String? = null,
+    val accountExternalId: String? = null
+) {
+
+    class Builder internal constructor(
+        private val email: String,
+        private val name: String
+    ) {
+        var avatarUrl: String? = null
+        var emailHash: String? = null
+        var accountId: String? = null
+        var accountExternalId: String? = null
+
+        fun build(): PylonUser = PylonUser(
+            email = email,
+            name = name,
+            avatarUrl = avatarUrl,
+            emailHash = emailHash,
+            accountId = accountId,
+            accountExternalId = accountExternalId
+        )
+    }
+
+    companion object {
+        @JvmStatic
+        @JvmOverloads
+        fun build(email: String, name: String, block: Builder.() -> Unit = {}): PylonUser {
+            return Builder(email, name).apply(block).build()
+        }
+    }
+}

package/android/src/main/java/com/pylonchat/reactnative/RNPylonChatPackage.kt

@@ -0,0 +1,17 @@
+package com.pylonchat.reactnative
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class RNPylonChatPackage : ReactPackage {
+    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+        return emptyList()
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return listOf(RNPylonChatViewManager())
+    }
+}
+

package/android/src/main/java/com/pylonchat/reactnative/RNPylonChatView.kt

@@ -0,0 +1,298 @@
+package com.pylonchat.reactnative
+
+import android.content.Context
+import android.view.MotionEvent
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReactContext
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.RCTEventEmitter
+import com.pylon.chatwidget.PylonChatListener
+import com.pylon.chatwidget.PylonChatView
+import com.pylon.chatwidget.PylonConfig
+import com.pylon.chatwidget.PylonUser
+
+/**
+ * React Native wrapper for PylonChatView.
+ * This is kept as minimal as possible to avoid interfering with touch pass-through.
+ */
+class RNPylonChatView(context: Context) : FrameLayout(context) {
+    
+    private var pylonChatView: PylonChatView? = null
+    private var config: PylonConfig? = null
+    private var user: PylonUser? = null
+    
+    // Config properties
+    var appId: String? = null
+        set(value) {
+            field = value
+            updateConfig()
+        }
+    
+    var widgetBaseUrl: String? = null
+        set(value) {
+            field = value
+            updateConfig()
+        }
+    
+    var widgetScriptUrl: String? = null
+        set(value) {
+            field = value
+            updateConfig()
+        }
+    
+    var enableLogging: Boolean = true
+        set(value) {
+            field = value
+            updateConfig()
+        }
+    
+    var debugMode: Boolean = false
+        set(value) {
+            field = value
+            updateConfig()
+        }
+    
+    var primaryColor: String? = null
+        set(value) {
+            field = value
+            updateConfig()
+        }
+    
+    // User properties
+    var userEmail: String? = null
+        set(value) {
+            field = value
+            updateUser()
+        }
+    
+    var userName: String? = null
+        set(value) {
+            field = value
+            updateUser()
+        }
+    
+    var userAvatarUrl: String? = null
+        set(value) {
+            field = value
+            updateUser()
+        }
+    
+    var userEmailHash: String? = null
+        set(value) {
+            field = value
+            updateUser()
+        }
+    
+    var userAccountId: String? = null
+        set(value) {
+            field = value
+            updateUser()
+        }
+    
+    var userAccountExternalId: String? = null
+        set(value) {
+            field = value
+            updateUser()
+        }
+
+    init {
+        layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+    }
+    
+    // Track pointer events setting
+    private var pointerEventsMode = "auto"
+    
+    fun setPointerEventsMode(mode: String) {
+        pointerEventsMode = mode
+    }
+    
+    /**
+     * This is the CRITICAL method for pointerEvents.
+     * By returning false here when pointerEvents="none", we tell React Native's
+     * touch system to pass the touch to views BEHIND this one, not just children.
+     */
+    override fun dispatchTouchEvent(ev: MotionEvent): Boolean {
+        when (pointerEventsMode) {
+            "none" -> {
+                // Don't handle ANY touches - pass through to views BEHIND this one
+                return false
+            }
+            "box-none" -> {
+                // This view doesn't handle touches, but children can
+                // Try children first, if they don't handle it, pass through
+                val handled = super.dispatchTouchEvent(ev)
+                return handled  // If children didn't handle it, return false passes through
+            }
+            "box-only" -> {
+                // Only this view handles touches, not children
+                // Don't dispatch to children
+                return onTouchEvent(ev)
+            }
+            else -> {
+                // "auto" - normal behavior
+                return super.dispatchTouchEvent(ev)
+            }
+        }
+    }
+
+    private fun updateConfig() {
+        val id = appId ?: return
+        
+        config = PylonConfig.build(id) {
+            this.enableLogging = this@RNPylonChatView.enableLogging
+            this.primaryColor = this@RNPylonChatView.primaryColor
+            this.debugMode = this@RNPylonChatView.debugMode
+            this@RNPylonChatView.widgetBaseUrl?.let { this.widgetBaseUrl = it }
+            this@RNPylonChatView.widgetScriptUrl?.let { this.widgetScriptUrl = it }
+        }
+        
+        recreatePylonView()
+    }
+    
+    private fun updateUser() {
+        val email = userEmail ?: return
+        val name = userName ?: return
+        
+        user = PylonUser(
+            email = email,
+            name = name,
+            avatarUrl = userAvatarUrl,
+            emailHash = userEmailHash,
+            accountId = userAccountId,
+            accountExternalId = userAccountExternalId
+        )
+        
+        recreatePylonView()
+    }
+    
+    private fun recreatePylonView() {
+        val cfg = config ?: return
+        val usr = user ?: return
+        
+        // Remove old view
+        pylonChatView?.let { removeView(it) }
+        
+        // Create new PylonChatView
+        val newView = PylonChatView(context, cfg, usr)
+        newView.setListener(object : PylonChatListener {
+            override fun onPylonLoaded() {
+                sendEvent("onPylonLoaded", Arguments.createMap())
+            }
+            
+            override fun onPylonInitialized() {
+                sendEvent("onPylonInitialized", Arguments.createMap())
+            }
+            
+            override fun onPylonReady() {
+                sendEvent("onPylonReady", Arguments.createMap())
+            }
+            
+            override fun onMessageReceived(message: String) {
+                val params = Arguments.createMap()
+                params.putString("message", message)
+                sendEvent("onMessageReceived", params)
+            }
+            
+            override fun onChatOpened() {
+                sendEvent("onChatOpened", Arguments.createMap())
+            }
+            
+            override fun onChatClosed() {
+                val params = Arguments.createMap()
+                params.putBoolean("wasOpen", true)
+                sendEvent("onChatClosed", params)
+            }
+            
+            override fun onInteractiveBoundsChanged(selector: String, left: Float, top: Float, right: Float, bottom: Float) {
+                // Convert pixels to density-independent pixels (dp) for React Native.
+                val density = resources.displayMetrics.density
+                val params = Arguments.createMap()
+                params.putString("selector", selector)
+                params.putDouble("left", (left / density).toDouble())
+                params.putDouble("top", (top / density).toDouble())
+                params.putDouble("right", (right / density).toDouble())
+                params.putDouble("bottom", (bottom / density).toDouble())
+                sendEvent("onInteractiveBoundsChanged", params)
+            }
+            
+            override fun onPylonError(error: String) {
+                val params = Arguments.createMap()
+                params.putString("error", error)
+                sendEvent("onPylonError", params)
+            }
+            
+            override fun onUnreadCountChanged(count: Int) {
+                val params = Arguments.createMap()
+                params.putInt("count", count)
+                sendEvent("onUnreadCountChanged", params)
+            }
+            
+            override fun onFileChooserLaunched(requestCode: Int) {
+                // Handle file chooser if needed
+            }
+        })
+        
+        newView.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+        addView(newView)
+        pylonChatView = newView
+    }
+    
+    private fun sendEvent(eventName: String, params: WritableMap) {
+        val reactContext = context as ReactContext
+        reactContext
+            .getJSModule(RCTEventEmitter::class.java)
+            .receiveEvent(id, eventName, params)
+    }
+    
+    // Imperative methods
+    fun openChat() {
+        pylonChatView?.openChat()
+    }
+    
+    fun closeChat() {
+        pylonChatView?.closeChat()
+    }
+    
+    fun showChatBubble() {
+        pylonChatView?.showChatBubble()
+    }
+    
+    fun hideChatBubble() {
+        pylonChatView?.hideChatBubble()
+    }
+    
+    fun showNewMessage(message: String, isHtml: Boolean) {
+        pylonChatView?.showNewMessage(message, isHtml)
+    }
+    
+    fun setNewIssueCustomFields(fields: Map<String, Any?>) {
+        @Suppress("UNCHECKED_CAST")
+        pylonChatView?.setNewIssueCustomFields(fields as Map<String, Any>)
+    }
+
+    fun setTicketFormFields(fields: Map<String, Any?>) {
+        @Suppress("UNCHECKED_CAST")
+        pylonChatView?.setTicketFormFields(fields as Map<String, Any>)
+    }
+    
+    fun updateEmailHash(emailHash: String?) {
+        pylonChatView?.setEmailHash(emailHash)
+    }
+    
+    fun showTicketForm(slug: String) {
+        pylonChatView?.showTicketForm(slug)
+    }
+    
+    fun showKnowledgeBaseArticle(articleId: String) {
+        pylonChatView?.showKnowledgeBaseArticle(articleId)
+    }
+    
+    fun clickElementAtSelector(selector: String) {
+        // Trigger a click on the element with the given ID selector.
+        // This is used for Android's proxy-based touch pass-through system.
+        pylonChatView?.clickElementBySelector(selector)
+    }
+}
+