@webotme/react-native 0.1.1

package/src/widget.tsx

@@ -0,0 +1,647 @@
+import React, { useMemo, useState, useEffect, useRef, useCallback } from "react";
+import {
+  ActivityIndicator,
+  Alert,
+  Animated,
+  BackHandler,
+  Keyboard,
+  Linking,
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+import { Audio } from "expo-av";
+import { WebView } from "react-native-webview";
+import { useWebotMe } from "./provider";
+import { AutoFlowExecutor } from "./AutoFlowExecutor";
+import type { WebotMeTheme, WebotMeAction, WebotMePendingWorkflow, WebotMeAutoTask, WebotMeScreenContext } from "./types";
+
+type TextInputCompatProps = {
+  value: string;
+  onChange: (v: string) => void;
+  onSend: () => void;
+  placeholder: string;
+  placeholderColor: string;
+  disabled?: boolean;
+  colors: { text: string; primary: string };
+};
+
+export type WidgetMode = "modal" | "inline";
+
+export type WebotMeWidgetProps = {
+  /** `modal` opens over your app (default). `inline` renders in place. */
+  mode?: WidgetMode;
+  /** `native` renders a native RN chat UI instead of the web chat page. */
+  variant?: "web" | "native";
+  /** modal only — the modal stays closed until this is true. */
+  visible?: boolean;
+  onClose?: () => void;
+  title?: string;
+  theme?: WebotMeTheme;
+  /** Set false to hide the header close button. */
+  showClose?: boolean;
+  /** Inline mode only — style passed to the wrapper View. */
+  style?: any;
+  /** Navigation function for AutoFlow navigate actions. */
+  navigate?: (routeName: string, params?: Record<string, any>) => void;
+  /** Go back function for AutoFlow. */
+  goBack?: () => void;
+  /** Push function for AutoFlow. */
+  push?: (routeName: string, params?: Record<string, any>) => void;
+  /** Current screen context for AutoFlow form filling. */
+  screenContext?: WebotMeScreenContext;
+  /** Called when an AutoFlow action is executed. */
+  onActionExecuted?: (action: any, success: boolean, error?: string) => void;
+  /** Called when workflow state changes. */
+  onWorkflowUpdate?: (workflow: any) => void;
+};
+
+const NativeModalChat: React.FC<{
+  palette: typeof DEFAULT_THEME;
+  title?: string;
+  showCloseModal: boolean;
+  onClose: () => void;
+  messages: ReturnType<typeof useWebotMe>["messages"];
+  send: (t: string) => Promise<void>;
+  sending: boolean;
+  error: string | null;
+  retry: () => void;
+  botId: string;
+  chatUrl: string;
+  pendingWorkflow?: WebotMePendingWorkflow | null;
+  autoTask?: WebotMeAutoTask | null;
+  navigate?: (routeName: string, params?: Record<string, any>) => void;
+  goBack?: () => void;
+  push?: (routeName: string, params?: Record<string, any>) => void;
+  screenContext?: WebotMeScreenContext;
+  onActionExecuted?: (action: any, success: boolean, error?: string) => void;
+  onWorkflowUpdate?: (workflow: any) => void;
+  draft: string;
+  setDraft: (v: string) => void;
+  sheetHeight: Animated.Value;
+  open: boolean;
+  close: () => void;
+  keyboardHeight: number;
+}> = ({
+  palette,
+  title,
+  showCloseModal,
+  onClose,
+  messages,
+  send,
+  sending,
+  error,
+  retry,
+  botId,
+  chatUrl,
+  pendingWorkflow,
+  autoTask,
+  navigate,
+  goBack,
+  push,
+  screenContext,
+  onActionExecuted,
+  onWorkflowUpdate,
+  draft,
+  setDraft,
+  sheetHeight,
+  open,
+  close,
+  keyboardHeight,
+}) => {
+  const handleBackPress = useCallback(() => {
+    if (open) {
+      close();
+      return true;
+    }
+    return false;
+  }, [open, close]);
+
+  useEffect(() => {
+    const subscription = BackHandler.addEventListener("hardwareBackPress", handleBackPress);
+    return () => subscription.remove();
+  }, [handleBackPress]);
+
+  return (
+    <Modal
+      visible={open}
+      animationType="none"
+      transparent
+      onRequestClose={close}
+      onShow={() => {
+        Animated.timing(sheetHeight, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }).start();
+      }}
+    >
+      <Pressable
+        style={styles.backdrop}
+        onPress={close}
+        accessibilityLabel="Close chat"
+      />
+      <Animated.View style={[styles.sheet, { transform: [{ translateY: sheetHeight.interpolate({ inputRange: [0, 1], outputRange: ["100%", 0] as any }) }] }]}>
+        {showCloseModal && (
+          <View style={[styles.header, { backgroundColor: palette.surface }]}>
+            <View style={styles.grabber} />
+            <Text style={[styles.headerTitle, { color: palette.text }]}>
+              {title || "Chat with us"}
+            </Text>
+            <Pressable onPress={close} hitSlop={10} accessibilityLabel="Close chat">
+              <Text style={[styles.close, { color: palette.muted }]}>✕</Text>
+            </Pressable>
+          </View>
+        )}
+        <NativeChat
+          palette={palette}
+          title={title}
+          showClose={false}
+          onClose={close}
+          messages={messages}
+          send={send}
+          sending={sending}
+          error={error}
+          retry={retry}
+          botId={botId}
+          chatUrl={chatUrl}
+          pendingWorkflow={pendingWorkflow}
+          autoTask={autoTask}
+          navigate={navigate}
+          goBack={goBack}
+          push={push}
+          screenContext={screenContext}
+          onActionExecuted={onActionExecuted}
+          onWorkflowUpdate={onWorkflowUpdate}
+          draft={draft}
+          setDraft={setDraft}
+        />
+        <KeyboardAvoidingView
+          behavior={Platform.OS === "ios" ? "padding" : "height"}
+          keyboardVerticalOffset={0}
+          style={styles.keyboardAvoiding}
+        >
+          <View style={[styles.composer, { borderTopColor: palette.surface }]}>
+            <TextInputCompat
+              value={draft}
+              onChange={setDraft}
+              onSend={() => {
+                const t = draft;
+                setDraft("");
+                void send(t);
+              }}
+              placeholder="Type a message…"
+              placeholderColor={palette.muted}
+              disabled={sending}
+              colors={{ text: palette.text, primary: palette.primary }}
+            />
+          </View>
+        </KeyboardAvoidingView>
+      </Animated.View>
+    </Modal>
+  );
+};
+
+const DEFAULT_THEME: Required<Pick<WebotMeTheme, "primary" | "background" | "surface" | "text" | "muted">> = {
+  primary: "#4f46e5",
+  background: "#0f172a",
+  surface: "#1e293b",
+  text: "#f8fafc",
+  muted: "#94a3b8",
+};
+
+export function WebotMeWidget({
+  mode = "modal",
+  variant = "web",
+  visible = false,
+  onClose,
+  title,
+  theme,
+  showClose = true,
+  style,
+  navigate,
+  goBack,
+  push,
+  screenContext,
+  onActionExecuted,
+  onWorkflowUpdate,
+}: WebotMeWidgetProps) {
+  const { chatUrl, botId, messages, send, sending, error, retry, pendingWorkflow, autoTask } = useWebotMe();
+
+  const open = visible;
+  const palette = { ...DEFAULT_THEME, ...(theme || {}) };
+
+  const close = () => {
+    onClose?.();
+  };
+
+  // Shared modal state
+  const [draft, setDraft] = useState("");
+  const sheetHeight = useRef(new Animated.Value(0)).current;
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener("keyboardDidShow", (e) => {
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
+      setKeyboardHeight(0);
+    });
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      Animated.timing(sheetHeight, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      Animated.timing(sheetHeight, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: true,
+      }).start(() => {});
+    }
+  }, [open]);
+
+  // AutoFlow executor (headless)
+  const executorRef = React.useRef<{
+    executeAction: (action: any) => Promise<{ success: boolean; error?: string }>;
+    executeActions: (actions: any[]) => Promise<void>;
+    handleServerResponse: (response: any) => Promise<void>;
+  } | null>(null);
+
+  // Handle pending workflow UI
+  const [showWorkflowIndicator, setShowWorkflowIndicator] = useState(false);
+
+  if (variant === "native") {
+    if (mode === "modal") {
+      return (
+        <NativeModalChat
+          palette={palette}
+          title={title}
+          showCloseModal={showClose}
+          onClose={close}
+          messages={messages}
+          send={send}
+          sending={sending}
+          error={error}
+          retry={retry}
+          botId={botId}
+          chatUrl={chatUrl}
+          pendingWorkflow={pendingWorkflow}
+          autoTask={autoTask}
+          navigate={navigate}
+          goBack={goBack}
+          push={push}
+          screenContext={screenContext}
+          onActionExecuted={onActionExecuted}
+          onWorkflowUpdate={onWorkflowUpdate}
+          draft={draft}
+          setDraft={setDraft}
+          sheetHeight={sheetHeight}
+          open={open}
+          close={close}
+          keyboardHeight={keyboardHeight}
+        />
+    );
+    }
+    return (
+      <NativeChat
+        palette={palette}
+        title={title}
+        showClose={showClose}
+        onClose={close}
+        messages={messages}
+        send={send}
+        sending={sending}
+        error={error}
+        retry={retry}
+        botId={botId}
+        chatUrl={chatUrl}
+        pendingWorkflow={pendingWorkflow}
+        autoTask={autoTask}
+        navigate={navigate}
+        goBack={goBack}
+        push={push}
+        screenContext={screenContext}
+        onActionExecuted={onActionExecuted}
+        onWorkflowUpdate={onWorkflowUpdate}
+      />
+    );
+  }
+
+  const web = (
+    <WebView
+      source={{ uri: `${chatUrl}?embed=1&bot=${botId}` }}
+      style={{ flex: 1, backgroundColor: palette.background }}
+      originWhitelist={["*"]}
+      allowsInlineMediaPlayback
+      mediaPlaybackRequiresUserAction={false}
+      setSupportMultipleWindows={false}
+      onShouldStartLoadWithRequest={(req: { url: string }): boolean => {
+        // Let the chat open external links (whatsapp, checkout) in the browser.
+        if (req.url.startsWith("http") && !req.url.includes(chatUrl)) {
+          Linking.openURL(req.url).catch(() => {});
+          return false;
+        }
+        return true;
+      }}
+    />
+  );
+
+  if (mode === "inline") {
+    return (
+      <View style={[styles.inline, { backgroundColor: palette.background }, style]}>
+        {web}
+      </View>
+    );
+  }
+
+  // Bottom sheet modal for web variant
+  useEffect(() => {
+    const showSubscription = Keyboard.addListener("keyboardDidShow", (e) => {
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
+      setKeyboardHeight(0);
+    });
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      Animated.timing(sheetHeight, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      Animated.timing(sheetHeight, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: true,
+      }).start(() => {});
+    }
+  }, [open]);
+
+  const handleBackPress = useCallback(() => {
+    if (open) {
+      close();
+      return true;
+    }
+    return false;
+  }, [open, close]);
+
+  useEffect(() => {
+    const subscription = BackHandler.addEventListener("hardwareBackPress", handleBackPress);
+    return () => subscription.remove();
+  }, [handleBackPress]);
+
+  const sheetStyle = {
+    transform: [
+      {
+        translateY: sheetHeight.interpolate({
+          inputRange: [0, 1],
+          outputRange: ["100%", 0] as any,
+        }),
+      },
+    ],
+  };
+
+  return (
+    <Modal
+      visible={open}
+      animationType="none"
+      transparent
+      onRequestClose={close}
+      onShow={() => {
+        Animated.timing(sheetHeight, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }).start();
+      }}
+    >
+      <Pressable
+        style={styles.backdrop}
+        onPress={close}
+        accessibilityLabel="Close chat"
+      />
+      <Animated.View style={[styles.sheet, sheetStyle]}>
+        {showClose && (
+          <View style={[styles.header, { backgroundColor: palette.surface }]}>
+            <View style={styles.grabber} />
+            <Text style={[styles.headerTitle, { color: palette.text }]}>
+              {title || "Chat with us"}
+            </Text>
+            <Pressable onPress={close} hitSlop={10} accessibilityLabel="Close chat">
+              <Text style={[styles.close, { color: palette.muted }]}>✕</Text>
+            </Pressable>
+          </View>
+        )}
+        <View style={styles.webViewContainer}>
+          {web}
+        </View>
+        <KeyboardAvoidingView
+          behavior={Platform.OS === "ios" ? "padding" : "height"}
+          keyboardVerticalOffset={0}
+          style={styles.keyboardAvoiding}
+        >
+          <View style={[styles.composer, { borderTopColor: palette.surface }]}>
+            <TextInputCompat
+              value={draft}
+              onChange={setDraft}
+              onSend={() => {
+                const t = draft;
+                setDraft("");
+                void send(t);
+              }}
+              placeholder="Type a message…"
+              placeholderColor={palette.muted}
+              disabled={sending}
+              colors={{ text: palette.text, primary: palette.primary }}
+            />
+          </View>
+        </KeyboardAvoidingView>
+      </Animated.View>
+    </Modal>
+  );
+}
+
+type NativeChatProps = {
+  palette: typeof DEFAULT_THEME;
+  title?: string;
+  showClose: boolean;
+  onClose: () => void;
+  messages: ReturnType<typeof useWebotMe>["messages"];
+  send: (t: string) => Promise<void>;
+  sending: boolean;
+  error: string | null;
+  retry: () => void;
+  botId: string;
+  chatUrl: string;
+  pendingWorkflow?: WebotMePendingWorkflow | null;
+  autoTask?: WebotMeAutoTask | null;
+  navigate?: (routeName: string, params?: Record<string, any>) => void;
+  goBack?: () => void;
+  push?: (routeName: string, params?: Record<string, any>) => void;
+  screenContext?: WebotMeScreenContext;
+  onActionExecuted?: (action: any, success: boolean, error?: string) => void;
+  onWorkflowUpdate?: (workflow: any) => void;
+  /** External draft state (for modal mode) */
+  draft?: string;
+  setDraft?: (v: string) => void;
+};
+
+function NativeChat(props: NativeChatProps): React.ReactElement | null { return null; }
+function TextInputCompat(props: TextInputCompatProps): React.ReactElement {
+  const { value, onChange, onSend, placeholder, placeholderColor, disabled, colors } = props;
+  return (
+    <View style={styles.composerRow}>
+      <TextInput
+        value={value}
+        onChangeText={onChange}
+        placeholder={placeholder}
+        placeholderTextColor={placeholderColor}
+        style={[styles.input, { color: colors.text }]}
+        onSubmitEditing={onSend}
+        returnKeyType="send"
+        editable={!disabled}
+      />
+      <Pressable
+        onPress={onSend}
+        disabled={disabled}
+        style={[styles.send, { backgroundColor: colors.primary, opacity: disabled ? 0.5 : 1 }]}
+        accessibilityLabel="Send message"
+      >
+        <Text style={styles.sendText}>↑</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  inline: { flex: 1, overflow: "hidden" },
+  center: { flex: 1, alignItems: "center", justifyContent: "center" },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+  },
+  headerTitle: { fontSize: 15, fontWeight: "700" },
+  close: { fontSize: 18, fontWeight: "700" },
+  messages: { flex: 1, padding: 12, gap: 8 },
+  row: { flexDirection: "row" },
+  rowUser: { justifyContent: "flex-end" },
+  rowBot: { justifyContent: "flex-start" },
+  bubble: { maxWidth: "80%", borderRadius: 14, paddingHorizontal: 12, paddingVertical: 8 },
+  bubbleText: { fontSize: 14, lineHeight: 20 },
+  actionBadge: {
+    marginTop: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4,
+    backgroundColor: "rgba(255,255,255,0.2)",
+  },
+  actionBadgeText: {
+    fontSize: 10,
+    color: "#fff",
+  },
+  workflowBanner: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: "rgba(255,255,255,0.1)",
+  },
+  workflowBannerText: {
+    fontSize: 12,
+    color: "#fff",
+    textAlign: "center",
+  },
+  error: { margin: 12, borderWidth: 1, borderRadius: 10, padding: 10 },
+  errorText: { fontSize: 12, textAlign: "center" },
+  composer: { borderTopWidth: StyleSheet.hairlineWidth, padding: 10 },
+  composerRow: { flexDirection: "row", alignItems: "center", gap: 8 },
+  input: { flex: 1, fontSize: 14, paddingHorizontal: 12, paddingVertical: 10, borderRadius: 20 },
+  send: { width: 40, height: 40, borderRadius: 20, alignItems: "center", justifyContent: "center" },
+  sendText: { color: "#fff", fontSize: 18, fontWeight: "700" },
+  debug: { fontSize: 9, textAlign: "center", paddingBottom: 4 },
+
+  // Voice styles
+  micButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderColor: "#334155",
+  },
+  micButtonText: { fontSize: 20 },
+  recordingIndicator: {
+    position: "absolute",
+    bottom: -18,
+    left: 0,
+    right: 0,
+    textAlign: "center",
+    fontSize: 10,
+    color: "#ef4444",
+    fontWeight: "600",
+  },
+  ttsButton: {
+    marginTop: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4,
+    backgroundColor: "rgba(79, 70, 229, 0.2)",
+  },
+  ttsButtonText: {
+    fontSize: 12,
+  },
+
+  // Modal bottom sheet styles
+  backdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.5)",
+  },
+  sheet: {
+    flex: 1,
+    backgroundColor: "#0f172a",
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    overflow: "hidden",
+  },
+  grabber: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: "#334155",
+    alignSelf: "center",
+    marginTop: 12,
+    marginBottom: 8,
+  },
+  webViewContainer: {
+    flex: 1,
+  },
+  keyboardAvoiding: {
+    flex: 1,
+  },
+});