@menuia/react-native 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+export { ChatMessage, ConnectionStatus, MenuIAClient, MenuIAConfig } from '@menuia/core';
+
+interface MenuIAChatProps {
+    /** Widget ID (from /dashboard/channels) - preferred */
+    widgetId?: string;
+    /** Agent ID (from /dashboard/agents) - fallback */
+    agentId?: string;
+    /** API base URL */
+    apiUrl?: string;
+    /** Primary color (hex) */
+    primaryColor?: string;
+    /** Position of the floating button */
+    position?: 'bottom-right' | 'bottom-left';
+    /** Bubble size in pixels */
+    bubbleSize?: number;
+    /** Bubble margin from edges */
+    bubbleMargin?: number;
+    /** Start with chat open */
+    defaultOpen?: boolean;
+    /** Show as inline (no floating button, fills container) */
+    inline?: boolean;
+    /** User metadata */
+    metadata?: {
+        name?: string;
+        email?: string;
+        phone?: string;
+        [key: string]: unknown;
+    };
+    /** Custom fields for AI tools */
+    customFields?: Record<string, string>;
+    /** Callback when new message received */
+    onMessage?: (message: {
+        role: string;
+        content: string;
+    }) => void;
+    /** Callback when chat opens/closes */
+    onToggle?: (isOpen: boolean) => void;
+}
+declare function MenuIAChat({ widgetId, agentId, apiUrl, primaryColor, position, bubbleSize, bubbleMargin, defaultOpen, inline, metadata, customFields, onMessage, onToggle, }: MenuIAChatProps): react_jsx_runtime.JSX.Element | null;
+
+export { MenuIAChat, type MenuIAChatProps };

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+export { ChatMessage, ConnectionStatus, MenuIAClient, MenuIAConfig } from '@menuia/core';
+
+interface MenuIAChatProps {
+    /** Widget ID (from /dashboard/channels) - preferred */
+    widgetId?: string;
+    /** Agent ID (from /dashboard/agents) - fallback */
+    agentId?: string;
+    /** API base URL */
+    apiUrl?: string;
+    /** Primary color (hex) */
+    primaryColor?: string;
+    /** Position of the floating button */
+    position?: 'bottom-right' | 'bottom-left';
+    /** Bubble size in pixels */
+    bubbleSize?: number;
+    /** Bubble margin from edges */
+    bubbleMargin?: number;
+    /** Start with chat open */
+    defaultOpen?: boolean;
+    /** Show as inline (no floating button, fills container) */
+    inline?: boolean;
+    /** User metadata */
+    metadata?: {
+        name?: string;
+        email?: string;
+        phone?: string;
+        [key: string]: unknown;
+    };
+    /** Custom fields for AI tools */
+    customFields?: Record<string, string>;
+    /** Callback when new message received */
+    onMessage?: (message: {
+        role: string;
+        content: string;
+    }) => void;
+    /** Callback when chat opens/closes */
+    onToggle?: (isOpen: boolean) => void;
+}
+declare function MenuIAChat({ widgetId, agentId, apiUrl, primaryColor, position, bubbleSize, bubbleMargin, defaultOpen, inline, metadata, customFields, onMessage, onToggle, }: MenuIAChatProps): react_jsx_runtime.JSX.Element | null;
+
+export { MenuIAChat, type MenuIAChatProps };

package/dist/index.js

@@ -0,0 +1,254 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  MenuIAChat: () => MenuIAChat,
+  MenuIAClient: () => import_core.MenuIAClient
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/MenuIAChat.tsx
+var import_react = require("react");
+var import_react_native = require("react-native");
+var import_jsx_runtime = require("react/jsx-runtime");
+var WebView;
+try {
+  WebView = require("react-native-webview").default;
+} catch {
+}
+function MenuIAChat({
+  widgetId,
+  agentId,
+  apiUrl = "https://ia.menuia.com",
+  primaryColor = "#7c3aed",
+  position = "bottom-right",
+  bubbleSize = 56,
+  bubbleMargin = 20,
+  defaultOpen = false,
+  inline = false,
+  metadata,
+  customFields,
+  onMessage,
+  onToggle
+}) {
+  const [isOpen, setIsOpen] = (0, import_react.useState)(defaultOpen);
+  const [unreadCount, setUnreadCount] = (0, import_react.useState)(0);
+  const webViewRef = (0, import_react.useRef)(null);
+  const id = widgetId || agentId || "";
+  const buildUrl = (0, import_react.useCallback)(() => {
+    const params = new URLSearchParams();
+    params.set("widget", "true");
+    if (primaryColor) params.set("color", primaryColor);
+    if (metadata?.name) params.set("name", metadata.name);
+    if (metadata?.email) params.set("email", metadata.email);
+    if (metadata?.phone) params.set("phone", metadata.phone);
+    if (customFields) {
+      Object.entries(customFields).forEach(([k, v]) => {
+        params.set(`cf_${k}`, v);
+      });
+    }
+    return `${apiUrl}/embed/chat/${id}?${params.toString()}`;
+  }, [id, apiUrl, primaryColor, metadata, customFields]);
+  const toggle = (0, import_react.useCallback)(() => {
+    const newState = !isOpen;
+    setIsOpen(newState);
+    if (newState) setUnreadCount(0);
+    onToggle?.(newState);
+  }, [isOpen, onToggle]);
+  const handleMessage = (0, import_react.useCallback)((event) => {
+    try {
+      const data = JSON.parse(event.nativeEvent.data);
+      if (data.type === "widget:close") {
+        setIsOpen(false);
+        onToggle?.(false);
+      } else if (data.type === "widget:message") {
+        if (!isOpen) {
+          setUnreadCount((prev) => prev + 1);
+        }
+        onMessage?.(data.data);
+      }
+    } catch {
+    }
+  }, [isOpen, onMessage, onToggle]);
+  const injectedJS = `
+    (function() {
+      window.addEventListener('message', function(e) {
+        if (e.data && typeof e.data === 'object') {
+          window.ReactNativeWebView.postMessage(JSON.stringify(e.data));
+        }
+      });
+    })();
+    true;
+  `;
+  if (!WebView) {
+    return null;
+  }
+  if (inline) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: styles.inlineContainer, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      WebView,
+      {
+        ref: webViewRef,
+        source: { uri: buildUrl() },
+        style: styles.webview,
+        javaScriptEnabled: true,
+        domStorageEnabled: true,
+        allowsInlineMediaPlayback: true,
+        mediaPlaybackRequiresUserAction: false,
+        injectedJavaScript: injectedJS,
+        onMessage: handleMessage,
+        startInLoadingState: true,
+        allowsFullscreenVideo: true
+      }
+    ) });
+  }
+  const isLeft = position === "bottom-left";
+  const { width: screenWidth } = import_react_native.Dimensions.get("window");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_react_native.TouchableOpacity,
+      {
+        onPress: toggle,
+        activeOpacity: 0.8,
+        style: [
+          styles.bubble,
+          {
+            width: bubbleSize,
+            height: bubbleSize,
+            borderRadius: bubbleSize / 2,
+            backgroundColor: primaryColor,
+            bottom: bubbleMargin,
+            ...isLeft ? { left: bubbleMargin } : { right: bubbleMargin }
+          }
+        ],
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: styles.bubbleIcon, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChatIcon, { size: 24 }) }),
+          unreadCount > 0 && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: styles.badge, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: styles.badgeInner, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BadgeText, { count: unreadCount }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_native.Modal,
+      {
+        visible: isOpen,
+        animationType: "slide",
+        transparent: false,
+        onRequestClose: toggle,
+        statusBarTranslucent: true,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.SafeAreaView, { style: [styles.modalContainer, { backgroundColor: "#0a0a14" }], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.StatusBar, { barStyle: "light-content", backgroundColor: "#0a0a14" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            WebView,
+            {
+              ref: webViewRef,
+              source: { uri: buildUrl() },
+              style: styles.webview,
+              javaScriptEnabled: true,
+              domStorageEnabled: true,
+              allowsInlineMediaPlayback: true,
+              mediaPlaybackRequiresUserAction: false,
+              injectedJavaScript: injectedJS,
+              onMessage: handleMessage,
+              startInLoadingState: true,
+              allowsFullscreenVideo: true,
+              allowsBackForwardNavigationGestures: false
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+function ChatIcon({ size }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: { width: size, height: size, alignItems: "center", justifyContent: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { width: size * 0.7, height: size * 0.55, borderRadius: size * 0.12, borderWidth: 2, borderColor: "white" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { width: 0, height: 0, borderLeftWidth: size * 0.12, borderRightWidth: size * 0.12, borderTopWidth: size * 0.12, borderLeftColor: "transparent", borderRightColor: "transparent", borderTopColor: "white", position: "absolute", bottom: size * 0.08, left: size * 0.15 } })
+  ] });
+}
+function CloseIcon({ size }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: { width: size, height: size, alignItems: "center", justifyContent: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { width: size * 0.6, height: 2.5, backgroundColor: "white", transform: [{ rotate: "45deg" }], position: "absolute" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { width: size * 0.6, height: 2.5, backgroundColor: "white", transform: [{ rotate: "-45deg" }], position: "absolute" } })
+  ] });
+}
+function BadgeText({ count }) {
+  const React2 = require("react");
+  const { Text } = require("react-native");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Text, { style: { color: "white", fontSize: 11, fontWeight: "700" }, children: count > 9 ? "9+" : count });
+}
+var styles = import_react_native.StyleSheet.create({
+  inlineContainer: {
+    flex: 1,
+    overflow: "hidden"
+  },
+  webview: {
+    flex: 1,
+    backgroundColor: "#0a0a14"
+  },
+  bubble: {
+    position: "absolute",
+    zIndex: 9999,
+    elevation: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    ...import_react_native.Platform.select({
+      ios: {
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8
+      },
+      android: {
+        elevation: 8
+      }
+    })
+  },
+  bubbleIcon: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  badge: {
+    position: "absolute",
+    top: -4,
+    right: -4,
+    minWidth: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: "#ef4444",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 4
+  },
+  badgeInner: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  modalContainer: {
+    flex: 1
+  }
+});
+
+// src/index.ts
+var import_core = require("@menuia/core");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MenuIAChat,
+  MenuIAClient
+});

package/dist/index.mjs

@@ -0,0 +1,242 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/MenuIAChat.tsx
+import { useState, useRef, useCallback } from "react";
+import {
+  View,
+  Modal,
+  TouchableOpacity,
+  StyleSheet,
+  Dimensions,
+  Platform,
+  SafeAreaView,
+  StatusBar
+} from "react-native";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var WebView;
+try {
+  WebView = __require("react-native-webview").default;
+} catch {
+}
+function MenuIAChat({
+  widgetId,
+  agentId,
+  apiUrl = "https://ia.menuia.com",
+  primaryColor = "#7c3aed",
+  position = "bottom-right",
+  bubbleSize = 56,
+  bubbleMargin = 20,
+  defaultOpen = false,
+  inline = false,
+  metadata,
+  customFields,
+  onMessage,
+  onToggle
+}) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [unreadCount, setUnreadCount] = useState(0);
+  const webViewRef = useRef(null);
+  const id = widgetId || agentId || "";
+  const buildUrl = useCallback(() => {
+    const params = new URLSearchParams();
+    params.set("widget", "true");
+    if (primaryColor) params.set("color", primaryColor);
+    if (metadata?.name) params.set("name", metadata.name);
+    if (metadata?.email) params.set("email", metadata.email);
+    if (metadata?.phone) params.set("phone", metadata.phone);
+    if (customFields) {
+      Object.entries(customFields).forEach(([k, v]) => {
+        params.set(`cf_${k}`, v);
+      });
+    }
+    return `${apiUrl}/embed/chat/${id}?${params.toString()}`;
+  }, [id, apiUrl, primaryColor, metadata, customFields]);
+  const toggle = useCallback(() => {
+    const newState = !isOpen;
+    setIsOpen(newState);
+    if (newState) setUnreadCount(0);
+    onToggle?.(newState);
+  }, [isOpen, onToggle]);
+  const handleMessage = useCallback((event) => {
+    try {
+      const data = JSON.parse(event.nativeEvent.data);
+      if (data.type === "widget:close") {
+        setIsOpen(false);
+        onToggle?.(false);
+      } else if (data.type === "widget:message") {
+        if (!isOpen) {
+          setUnreadCount((prev) => prev + 1);
+        }
+        onMessage?.(data.data);
+      }
+    } catch {
+    }
+  }, [isOpen, onMessage, onToggle]);
+  const injectedJS = `
+    (function() {
+      window.addEventListener('message', function(e) {
+        if (e.data && typeof e.data === 'object') {
+          window.ReactNativeWebView.postMessage(JSON.stringify(e.data));
+        }
+      });
+    })();
+    true;
+  `;
+  if (!WebView) {
+    return null;
+  }
+  if (inline) {
+    return /* @__PURE__ */ jsx(View, { style: styles.inlineContainer, children: /* @__PURE__ */ jsx(
+      WebView,
+      {
+        ref: webViewRef,
+        source: { uri: buildUrl() },
+        style: styles.webview,
+        javaScriptEnabled: true,
+        domStorageEnabled: true,
+        allowsInlineMediaPlayback: true,
+        mediaPlaybackRequiresUserAction: false,
+        injectedJavaScript: injectedJS,
+        onMessage: handleMessage,
+        startInLoadingState: true,
+        allowsFullscreenVideo: true
+      }
+    ) });
+  }
+  const isLeft = position === "bottom-left";
+  const { width: screenWidth } = Dimensions.get("window");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      TouchableOpacity,
+      {
+        onPress: toggle,
+        activeOpacity: 0.8,
+        style: [
+          styles.bubble,
+          {
+            width: bubbleSize,
+            height: bubbleSize,
+            borderRadius: bubbleSize / 2,
+            backgroundColor: primaryColor,
+            bottom: bubbleMargin,
+            ...isLeft ? { left: bubbleMargin } : { right: bubbleMargin }
+          }
+        ],
+        children: [
+          /* @__PURE__ */ jsx(View, { style: styles.bubbleIcon, children: isOpen ? /* @__PURE__ */ jsx(CloseIcon, { size: 24 }) : /* @__PURE__ */ jsx(ChatIcon, { size: 24 }) }),
+          unreadCount > 0 && !isOpen && /* @__PURE__ */ jsx(View, { style: styles.badge, children: /* @__PURE__ */ jsx(View, { style: styles.badgeInner, children: /* @__PURE__ */ jsx(BadgeText, { count: unreadCount }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Modal,
+      {
+        visible: isOpen,
+        animationType: "slide",
+        transparent: false,
+        onRequestClose: toggle,
+        statusBarTranslucent: true,
+        children: /* @__PURE__ */ jsxs(SafeAreaView, { style: [styles.modalContainer, { backgroundColor: "#0a0a14" }], children: [
+          /* @__PURE__ */ jsx(StatusBar, { barStyle: "light-content", backgroundColor: "#0a0a14" }),
+          /* @__PURE__ */ jsx(
+            WebView,
+            {
+              ref: webViewRef,
+              source: { uri: buildUrl() },
+              style: styles.webview,
+              javaScriptEnabled: true,
+              domStorageEnabled: true,
+              allowsInlineMediaPlayback: true,
+              mediaPlaybackRequiresUserAction: false,
+              injectedJavaScript: injectedJS,
+              onMessage: handleMessage,
+              startInLoadingState: true,
+              allowsFullscreenVideo: true,
+              allowsBackForwardNavigationGestures: false
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+function ChatIcon({ size }) {
+  return /* @__PURE__ */ jsxs(View, { style: { width: size, height: size, alignItems: "center", justifyContent: "center" }, children: [
+    /* @__PURE__ */ jsx(View, { style: { width: size * 0.7, height: size * 0.55, borderRadius: size * 0.12, borderWidth: 2, borderColor: "white" } }),
+    /* @__PURE__ */ jsx(View, { style: { width: 0, height: 0, borderLeftWidth: size * 0.12, borderRightWidth: size * 0.12, borderTopWidth: size * 0.12, borderLeftColor: "transparent", borderRightColor: "transparent", borderTopColor: "white", position: "absolute", bottom: size * 0.08, left: size * 0.15 } })
+  ] });
+}
+function CloseIcon({ size }) {
+  return /* @__PURE__ */ jsxs(View, { style: { width: size, height: size, alignItems: "center", justifyContent: "center" }, children: [
+    /* @__PURE__ */ jsx(View, { style: { width: size * 0.6, height: 2.5, backgroundColor: "white", transform: [{ rotate: "45deg" }], position: "absolute" } }),
+    /* @__PURE__ */ jsx(View, { style: { width: size * 0.6, height: 2.5, backgroundColor: "white", transform: [{ rotate: "-45deg" }], position: "absolute" } })
+  ] });
+}
+function BadgeText({ count }) {
+  const React2 = __require("react");
+  const { Text } = __require("react-native");
+  return /* @__PURE__ */ jsx(Text, { style: { color: "white", fontSize: 11, fontWeight: "700" }, children: count > 9 ? "9+" : count });
+}
+var styles = StyleSheet.create({
+  inlineContainer: {
+    flex: 1,
+    overflow: "hidden"
+  },
+  webview: {
+    flex: 1,
+    backgroundColor: "#0a0a14"
+  },
+  bubble: {
+    position: "absolute",
+    zIndex: 9999,
+    elevation: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    ...Platform.select({
+      ios: {
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8
+      },
+      android: {
+        elevation: 8
+      }
+    })
+  },
+  bubbleIcon: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  badge: {
+    position: "absolute",
+    top: -4,
+    right: -4,
+    minWidth: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: "#ef4444",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 4
+  },
+  badgeInner: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  modalContainer: {
+    flex: 1
+  }
+});
+
+// src/index.ts
+import { MenuIAClient } from "@menuia/core";
+export {
+  MenuIAChat,
+  MenuIAClient
+};

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@menuia/react-native",
+  "version": "1.0.0",
+  "description": "MenuIA Chat SDK - React Native Component",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean --external react --external react-native --external react-native-webview --external @menuia/core",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react --external react-native --external react-native-webview --external @menuia/core"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-native": ">=0.60.0",
+    "react-native-webview": ">=11.0.0"
+  },
+  "dependencies": {
+    "@menuia/core": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  },
+  "license": "MIT"
+}