@sagepilot-ai/react-native-sdk 0.2.1 → 0.2.3

package/dist/index.js

@@ -1,3 +1,44 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  SagepilotChat: () => SagepilotChat,
+  SagepilotChatError: () => SagepilotChatError,
+  SagepilotChatProvider: () => SagepilotChatProvider,
+  createAsyncStorageCacheStorage: () => createAsyncStorageCacheStorage,
+  createKeychainTokenStorage: () => createKeychainTokenStorage,
+  useSagepilotChat: () => useSagepilotChat
+});
+module.exports = __toCommonJS(index_exports);
+
 // src/core/errors/SagepilotChatError.ts
 var SagepilotChatError = class extends Error {
   constructor(code, message, options = {}) {
@@ -15,7 +56,7 @@ var SagepilotChatError = class extends Error {
 
 // src/core/config/constants.ts
 var SDK_NAME = "@sagepilot-ai/react-native-sdk";
-var SDK_VERSION = "0.2.0";
+var SDK_VERSION = "0.2.3";
 var DEFAULT_HOST = "https://app.sagepilot.ai";
 var DEFAULT_WIDGET_HOST = "https://app.sagepilot.ai";
 var CUSTOMER_API_PREFIX = "/customer-api/v1";
@@ -701,9 +742,9 @@ var SagepilotReactNativeChat = class {
     this.hostedChatView = { screen: "messages" };
     return this.showHostedChat();
   }
-  presentMessageComposer(message) {
+  presentMessageComposer(message, options) {
     this.requireConfigured();
-    this.hostedChatView = { screen: "composer", message };
+    this.hostedChatView = { screen: "composer", message, mode: options?.mode ?? "auto" };
     return this.showHostedChat();
   }
   dismiss() {
@@ -799,8 +840,13 @@ var SagepilotReactNativeChat = class {
     }
     url.searchParams.set("session_id", session.session_id);
     url.searchParams.set("wid", this.workspaceId);
+    if (this.legacyWidgetJwt) {
+      url.searchParams.set("jwt", this.legacyWidgetJwt);
+    }
     if (this.hostedChatView.screen === "composer") {
-      url.searchParams.set("new", "true");
+      if (this.hostedChatView.mode === "new") {
+        url.searchParams.set("new", "true");
+      }
       if (this.hostedChatView.message) {
         url.searchParams.set("topic", this.hostedChatView.message);
       }
@@ -826,6 +872,16 @@ var SagepilotReactNativeChat = class {
       "})();"
     ].join("\n");
   }
+  getHostedIdentityMessage() {
+    if (!this.legacyWidgetJwt) return null;
+    return {
+      type: "identity_update",
+      data: {
+        jwt: this.legacyWidgetJwt,
+        chat_id: this.session?.conversation_id ?? void 0
+      }
+    };
+  }
   handleHostedBridgeMessage(message) {
     if (!message) return false;
     if (message.type === "close_widget") {
@@ -1020,7 +1076,9 @@ var SagepilotChat = {
   stopUnreadPolling: () => internalSagepilotChat.stopUnreadPolling(),
   present: () => internalSagepilotChat.present(),
   presentMessages: () => internalSagepilotChat.presentMessages(),
-  presentMessageComposer: (message) => internalSagepilotChat.presentMessageComposer(message),
+  presentMessageComposer: (message, options) => {
+    return internalSagepilotChat.presentMessageComposer(message, options);
+  },
   dismiss: () => internalSagepilotChat.dismiss(),
   hide: () => internalSagepilotChat.hide(),
   toggle: () => internalSagepilotChat.toggle(),
@@ -1046,18 +1104,9 @@ function createAsyncStorageCacheStorage(asyncStorage) {
 }
 
 // src/ui/SagepilotChatProvider.ts
-import { createElement, useEffect, useState } from "react";
-import {
-  ActivityIndicator,
-  Modal,
-  Platform,
-  Pressable,
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  View
-} from "react-native";
-import { WebView } from "react-native-webview";
+var import_react = require("react");
+var import_react_native = require("react-native");
+var import_react_native_webview = require("react-native-webview");
 
 // src/core/webview/mobileBridge.ts
 function isHostedBridgeMessage(value) {
@@ -1138,6 +1187,28 @@ var mobileWebViewBridgeScript = `
       } catch (error) {}
     }, true);
 
+    document.addEventListener("focusin", function (event) {
+      try {
+        var target = event.target && event.target.closest
+          ? event.target
+          : event.target && event.target.parentElement;
+        if (target && target.closest && target.closest("input, textarea, [contenteditable='true']")) {
+          sendToReactNative({ type: "sagepilot:keyboard_focus" });
+        }
+      } catch (error) {}
+    }, true);
+
+    document.addEventListener("focusout", function (event) {
+      try {
+        var target = event.target && event.target.closest
+          ? event.target
+          : event.target && event.target.parentElement;
+        if (target && target.closest && target.closest("input, textarea, [contenteditable='true']")) {
+          sendToReactNative({ type: "sagepilot:keyboard_blur" });
+        }
+      } catch (error) {}
+    }, true);
+
     ensureViewport();
     injectMobileStyles();
     sendToReactNative({ type: "sagepilot:ready" });
@@ -1145,6 +1216,10 @@ var mobileWebViewBridgeScript = `
   })();
 `;
 
+// src/specs/SagepilotInsetsViewNativeComponent.ts
+var import_codegenNativeComponent = __toESM(require("react-native/Libraries/Utilities/codegenNativeComponent"));
+var SagepilotInsetsViewNativeComponent_default = (0, import_codegenNativeComponent.default)("SagepilotInsetsView");
+
 // src/ui/SagepilotChatProvider.ts
 function readPresentationState() {
   return {
@@ -1162,6 +1237,20 @@ function getInjectedWebViewScript() {
     mobileWebViewBridgeScript
   ].filter(Boolean).join("\n");
 }
+function getHostedIdentityDispatchScript() {
+  const message = internalSagepilotChat.getHostedIdentityMessage();
+  if (!message) return "";
+  return [
+    internalSagepilotChat.getHostedAuthScript(),
+    "(function(){",
+    "try {",
+    `var message = ${JSON.stringify(message)};`,
+    "window.dispatchEvent(new MessageEvent('message', { data: message, origin: window.location.origin, source: window.parent || window }));",
+    "} catch (_) {}",
+    "true;",
+    "})();"
+  ].filter(Boolean).join("\n");
+}
 function readUrlOrigin(url) {
   if (!url) return null;
   try {
@@ -1173,33 +1262,78 @@ function readUrlOrigin(url) {
 var hostedChatWebViewProps = {
   allowFileAccess: true,
   allowFileAccessFromFileURLs: true,
+  bounces: false,
   domStorageEnabled: true,
   javaScriptEnabled: true,
+  overScrollMode: "never",
+  scrollEnabled: import_react_native.Platform.OS !== "android",
   setSupportMultipleWindows: false,
   sharedCookiesEnabled: true,
   thirdPartyCookiesEnabled: true
 };
+var AndroidInsetsView = import_react_native.Platform.OS === "android" ? SagepilotInsetsViewNativeComponent_default : import_react_native.View;
+var emptyAndroidInsets = { top: 0, bottom: 0 };
 function SagepilotChatProvider({
   children,
   closeLabel = "Close",
   loadingLabel = "Loading chat"
 }) {
-  const [state, setState] = useState(readPresentationState);
-  useEffect(() => {
+  const [state, setState] = (0, import_react.useState)(readPresentationState);
+  const [androidModalInsets, setAndroidModalInsets] = (0, import_react.useState)(emptyAndroidInsets);
+  const webFrameRef = (0, import_react.useRef)(null);
+  const nativeWebViewRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
     return internalSagepilotChat.onStateChange(() => {
       setState(readPresentationState());
     });
   }, []);
+  const handleAndroidInsetsChange = (0, import_react.useCallback)((event) => {
+    const nextBottomInset = event.nativeEvent?.bottom;
+    const nextTopInset = event.nativeEvent?.top;
+    if (typeof nextBottomInset !== "number" || typeof nextTopInset !== "number" || !Number.isFinite(nextBottomInset) || !Number.isFinite(nextTopInset)) return;
+    setAndroidModalInsets({
+      top: Math.max(0, nextTopInset),
+      bottom: Math.max(0, nextBottomInset)
+    });
+  }, []);
   const showCloseButton = state.presentation?.showCloseButton ?? false;
   const presentationStyle = state.presentation?.style ?? "sheet";
   const isFullScreenModal = presentationStyle === "fullScreen";
   const animationType = presentationStyle === "fullScreen" || presentationStyle === "push" ? "slide" : "fade";
-  const ModalContainer = Platform.OS === "ios" && isFullScreenModal ? SafeAreaView : View;
+  const ModalContainer = import_react_native.Platform.OS === "ios" && isFullScreenModal ? import_react_native.SafeAreaView : import_react_native.View;
+  const NativeModalContainer = import_react_native.Platform.OS === "android" ? AndroidInsetsView : ModalContainer;
+  const ChatContentContainer = import_react_native.Platform.OS === "ios" ? import_react_native.KeyboardAvoidingView : import_react_native.View;
+  const nativeModalContainerProps = import_react_native.Platform.OS === "android" ? { style: styles.container, onInsetsChange: handleAndroidInsetsChange } : { style: styles.container };
+  const chatContentContainerProps = import_react_native.Platform.OS === "ios" ? {
+    behavior: "padding",
+    enabled: true,
+    keyboardVerticalOffset: 0,
+    style: styles.modalContent
+  } : {
+    style: [
+      styles.modalContent,
+      import_react_native.Platform.OS === "android" ? {
+        paddingTop: androidModalInsets.top,
+        paddingBottom: androidModalInsets.bottom
+      } : null
+    ].filter(Boolean)
+  };
   const handleWebViewMessage = (event) => {
     internalSagepilotChat.handleHostedBridgeMessage(parseHostedBridgeMessage(event.nativeEvent?.data));
   };
-  useEffect(() => {
-    if (Platform.OS !== "web" || typeof window === "undefined") return;
+  const postIdentityToWebFrame = () => {
+    const message = internalSagepilotChat.getHostedIdentityMessage();
+    const targetOrigin = readUrlOrigin(state.conversationUrl);
+    if (!message || !targetOrigin) return;
+    webFrameRef.current?.contentWindow?.postMessage(message, targetOrigin);
+  };
+  const postIdentityToNativeWebView = () => {
+    const script = getHostedIdentityDispatchScript();
+    if (!script || !nativeWebViewRef.current) return;
+    nativeWebViewRef.current.injectJavaScript(script);
+  };
+  (0, import_react.useEffect)(() => {
+    if (import_react_native.Platform.OS !== "web" || typeof window === "undefined") return;
     const trustedWidgetOrigin = readUrlOrigin(state.conversationUrl);
     if (!trustedWidgetOrigin) return;
     const handleWindowMessage = (event) => {
@@ -1209,96 +1343,114 @@ function SagepilotChatProvider({
     window.addEventListener("message", handleWindowMessage);
     return () => window.removeEventListener("message", handleWindowMessage);
   }, [state.conversationUrl]);
-  if (Platform.OS === "web") {
-    return createElement(
-      View,
+  (0, import_react.useEffect)(() => {
+    if (import_react_native.Platform.OS !== "web" || !state.isPresented) return;
+    postIdentityToWebFrame();
+  }, [state.isPresented, state.conversationUrl, state.configured]);
+  (0, import_react.useEffect)(() => {
+    if (import_react_native.Platform.OS === "web" || !state.isPresented) return;
+    postIdentityToNativeWebView();
+  }, [state.isPresented, state.conversationUrl, state.configured]);
+  if (import_react_native.Platform.OS === "web") {
+    return (0, import_react.createElement)(
+      import_react_native.View,
       { style: styles.root },
       children,
-      state.configured && !state.isPresented && state.shouldPreload && state.preloadUrl ? createElement("iframe", {
+      state.configured && !state.isPresented && state.shouldPreload && state.preloadUrl ? (0, import_react.createElement)("iframe", {
         src: state.preloadUrl,
         style: styles.webPreloadFrame,
         title: "Sagepilot chat preload"
       }) : null,
-      state.configured && state.isPresented && state.conversationUrl ? createElement(
-        View,
+      state.configured && state.isPresented && state.conversationUrl ? (0, import_react.createElement)(
+        import_react_native.View,
         { style: styles.webOverlay },
-        createElement(
-          View,
+        (0, import_react.createElement)(
+          import_react_native.View,
           { style: styles.webPanel },
-          showCloseButton ? createElement(
-            Pressable,
+          showCloseButton ? (0, import_react.createElement)(
+            import_react_native.Pressable,
             {
               accessibilityRole: "button",
               accessibilityLabel: closeLabel,
               onPress: () => internalSagepilotChat.dismiss(),
               style: styles.webCloseButton
             },
-            createElement(Text, { style: styles.closeText }, closeLabel)
+            (0, import_react.createElement)(import_react_native.Text, { style: styles.closeText }, closeLabel)
           ) : null,
-          createElement("iframe", {
+          (0, import_react.createElement)("iframe", {
+            ref: webFrameRef,
             src: state.conversationUrl,
             style: styles.webFrame,
-            title: "Sagepilot chat"
+            title: "Sagepilot chat",
+            onLoad: postIdentityToWebFrame
           })
         )
       ) : null
     );
   }
-  return createElement(
-    View,
+  return (0, import_react.createElement)(
+    import_react_native.View,
     { style: styles.root },
     children,
-    state.configured && !state.isPresented && state.shouldPreload && state.preloadUrl ? createElement(WebView, {
+    state.configured && !state.isPresented && state.shouldPreload && state.preloadUrl ? (0, import_react.createElement)(import_react_native_webview.WebView, {
       ...hostedChatWebViewProps,
       source: { uri: state.preloadUrl },
       style: styles.preloadWebview,
       injectedJavaScriptBeforeContentLoaded: getInjectedWebViewScript(),
       onMessage: handleWebViewMessage
     }) : null,
-    createElement(
-      Modal,
+    (0, import_react.createElement)(
+      import_react_native.Modal,
       {
         visible: state.configured && state.isPresented,
         animationType,
         presentationStyle: isFullScreenModal ? "fullScreen" : "pageSheet",
+        statusBarTranslucent: import_react_native.Platform.OS === "android",
+        navigationBarTranslucent: import_react_native.Platform.OS === "android",
         onRequestClose: () => internalSagepilotChat.dismiss()
       },
-      createElement(
-        ModalContainer,
-        { style: styles.container },
-        showCloseButton ? createElement(
-          View,
-          { style: styles.header },
-          createElement(
-            Pressable,
-            {
-              accessibilityRole: "button",
-              accessibilityLabel: closeLabel,
-              onPress: () => internalSagepilotChat.dismiss(),
-              style: styles.closeButton
-            },
-            createElement(Text, { style: styles.closeText }, closeLabel)
-          )
-        ) : null,
-        state.conversationUrl ? createElement(WebView, {
-          ...hostedChatWebViewProps,
-          source: { uri: state.conversationUrl },
-          style: styles.webview,
-          startInLoadingState: true,
-          injectedJavaScriptBeforeContentLoaded: getInjectedWebViewScript(),
-          onMessage: handleWebViewMessage,
-          renderLoading: () => createElement(
-            View,
-            { style: styles.loading },
-            createElement(ActivityIndicator, null),
-            createElement(Text, { style: styles.loadingText }, loadingLabel)
-          )
-        }) : null
+      (0, import_react.createElement)(
+        NativeModalContainer,
+        nativeModalContainerProps,
+        (0, import_react.createElement)(
+          ChatContentContainer,
+          chatContentContainerProps,
+          showCloseButton ? (0, import_react.createElement)(
+            import_react_native.View,
+            { style: styles.header },
+            (0, import_react.createElement)(
+              import_react_native.Pressable,
+              {
+                accessibilityRole: "button",
+                accessibilityLabel: closeLabel,
+                onPress: () => internalSagepilotChat.dismiss(),
+                style: styles.closeButton
+              },
+              (0, import_react.createElement)(import_react_native.Text, { style: styles.closeText }, closeLabel)
+            )
+          ) : null,
+          state.conversationUrl ? (0, import_react.createElement)(import_react_native_webview.WebView, {
+            ...hostedChatWebViewProps,
+            ref: nativeWebViewRef,
+            source: { uri: state.conversationUrl },
+            style: styles.webview,
+            startInLoadingState: true,
+            injectedJavaScriptBeforeContentLoaded: getInjectedWebViewScript(),
+            onMessage: handleWebViewMessage,
+            onLoadEnd: postIdentityToNativeWebView,
+            renderLoading: () => (0, import_react.createElement)(
+              import_react_native.View,
+              { style: styles.loading },
+              (0, import_react.createElement)(import_react_native.ActivityIndicator, null),
+              (0, import_react.createElement)(import_react_native.Text, { style: styles.loadingText }, loadingLabel)
+            )
+          }) : null
+        )
       )
     )
   );
 }
-var styles = StyleSheet.create({
+var styles = import_react_native.StyleSheet.create({
   root: {
     flex: 1
   },
@@ -1306,6 +1458,11 @@ var styles = StyleSheet.create({
     flex: 1,
     backgroundColor: "#ffffff"
   },
+  modalContent: {
+    flex: 1,
+    width: "100%",
+    backgroundColor: "#ffffff"
+  },
   header: {
     minHeight: 48,
     alignItems: "flex-end",
@@ -1379,7 +1536,7 @@ var styles = StyleSheet.create({
     borderStyle: "none"
   },
   loading: {
-    ...StyleSheet.absoluteFillObject,
+    ...import_react_native.StyleSheet.absoluteFillObject,
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "#ffffff"
@@ -1392,7 +1549,7 @@ var styles = StyleSheet.create({
 });
 
 // src/hooks/useSagepilotChat.ts
-import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
+var import_react2 = require("react");
 function readState() {
   const state = SagepilotChat.getState();
   return {
@@ -1404,23 +1561,25 @@ function readState() {
   };
 }
 function useSagepilotChat() {
-  const [state, setState] = useState2(readState);
-  useEffect2(() => {
+  const [state, setState] = (0, import_react2.useState)(readState);
+  (0, import_react2.useEffect)(() => {
     return SagepilotChat.onStateChange(() => {
       setState(readState());
     });
   }, []);
-  const present = useCallback(() => SagepilotChat.present(), []);
-  const presentMessages = useCallback(() => SagepilotChat.presentMessages(), []);
-  const presentMessageComposer = useCallback((message) => SagepilotChat.presentMessageComposer(message), []);
-  const dismiss = useCallback(() => SagepilotChat.dismiss(), []);
-  const hide = useCallback(() => SagepilotChat.hide(), []);
-  const toggle = useCallback(() => SagepilotChat.toggle(), []);
-  const identify = useCallback((identity) => {
+  const present = (0, import_react2.useCallback)(() => SagepilotChat.present(), []);
+  const presentMessages = (0, import_react2.useCallback)(() => SagepilotChat.presentMessages(), []);
+  const presentMessageComposer = (0, import_react2.useCallback)((message, options) => {
+    return SagepilotChat.presentMessageComposer(message, options);
+  }, []);
+  const dismiss = (0, import_react2.useCallback)(() => SagepilotChat.dismiss(), []);
+  const hide = (0, import_react2.useCallback)(() => SagepilotChat.hide(), []);
+  const toggle = (0, import_react2.useCallback)(() => SagepilotChat.toggle(), []);
+  const identify = (0, import_react2.useCallback)((identity) => {
     return SagepilotChat.identify(identity);
   }, []);
-  const logout = useCallback(() => SagepilotChat.logout(), []);
-  const getUnreadCount = useCallback(() => SagepilotChat.getUnreadCount(), []);
+  const logout = (0, import_react2.useCallback)(() => SagepilotChat.logout(), []);
+  const getUnreadCount = (0, import_react2.useCallback)(() => SagepilotChat.getUnreadCount(), []);
   return {
     ...state,
     present,
@@ -1434,11 +1593,12 @@ function useSagepilotChat() {
     getUnreadCount
   };
 }
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   SagepilotChat,
   SagepilotChatError,
   SagepilotChatProvider,
   createAsyncStorageCacheStorage,
   createKeychainTokenStorage,
   useSagepilotChat
-};
+});