@kavchat/react-native 0.0.0-stage → 0.0.2

package/src/ui/KavchatLauncher.tsx

@@ -0,0 +1,81 @@
+import { Modal, Pressable, SafeAreaView, StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { KavchatChat } from './KavchatChat';
+import { useKavchatContext } from './KavchatProvider';
+
+/**
+ * כפתור צף שפותח את הצ'אט בחלון מלא
+ * הכפתור לא מוצג כשהבוט לא זמין (כבוי, testers, מכסה), כמו בווידג'ט לאתר
+ */
+
+export interface KavchatLauncherProps {
+  /** מיקום הכפתור. ברירת מחדל: פינה תחתונה בצד הסוף. end מתהפך לבד ב-RTL */
+  style?: StyleProp<ViewStyle>;
+  /** בלי החלון המובנה, למשל כשהאפליקציה פותחת את KavchatChat במסך ניווט משלה */
+  onPress?: () => void;
+}
+
+export function KavchatLauncher({ style, onPress }: KavchatLauncherProps) {
+  const { snapshot, theme, isOpen, open, close } = useKavchatContext();
+  if (snapshot.status !== 'ready') return null;
+  const t = snapshot.texts;
+  return (
+    <>
+      <Pressable
+        onPress={onPress ?? open}
+        accessibilityRole="button"
+        accessibilityLabel={t['widget.open']}
+        style={({ pressed }) => [styles.fab, { backgroundColor: theme.primary }, pressed && styles.pressed, style]}
+      >
+        <ChatIcon color={theme.onPrimary} />
+      </Pressable>
+      {onPress ? null : (
+        <Modal visible={isOpen} animationType="slide" presentationStyle="pageSheet" onRequestClose={close}>
+          <SafeAreaView style={[styles.flex, { backgroundColor: theme.primary }]}>
+            <KavchatChat onClose={close} />
+          </SafeAreaView>
+        </Modal>
+      )}
+    </>
+  );
+}
+
+/** בועת צ'אט מ-View בלבד, כדי לא לחייב את האפליקציה בספריית אייקונים */
+function ChatIcon({ color }: { color: string }) {
+  return (
+    <View style={styles.icon}>
+      <View style={[styles.iconBody, { backgroundColor: color }]} />
+      <View style={[styles.iconTail, { borderTopColor: color }]} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: { flex: 1 },
+  fab: {
+    position: 'absolute',
+    bottom: 24,
+    end: 20,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    alignItems: 'center',
+    justifyContent: 'center',
+    elevation: 6,
+    shadowColor: '#000',
+    shadowOpacity: 0.2,
+    shadowRadius: 6,
+    shadowOffset: { width: 0, height: 3 },
+  },
+  pressed: { opacity: 0.85 },
+  icon: { width: 24, height: 24 },
+  iconBody: { width: 24, height: 18, borderRadius: 5 },
+  iconTail: {
+    width: 0,
+    height: 0,
+    marginStart: 4,
+    borderTopWidth: 6,
+    borderEndWidth: 6,
+    borderEndColor: 'transparent',
+  },
+});

package/src/ui/KavchatProvider.tsx

@@ -0,0 +1,166 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { AppState, Linking } from 'react-native';
+import type { FetchLike } from '../api';
+import { KavchatController, KavchatEvent, KavchatSnapshot } from '../controller';
+import type { KavchatScreen } from '../screens';
+import { StorageAdapter, defaultStorage } from '../storage';
+import { deviceLocale } from '../text';
+import { KavchatTheme, themeFor } from '../theme';
+
+/**
+ * ה-Provider מחזיק בקר אחד לכל האפליקציה, כדי שהשיחה תישמר גם כשמסך הצ'אט נסגר ונפתח
+ */
+
+export interface KavchatProviderProps {
+  /** המפתח הציבורי pk_live_... */
+  publicKey: string;
+  /** ברירת מחדל https://api.kavchat.com */
+  apiBase?: string;
+  /** שפת הממשק. ברירת מחדל: שפת המכשיר, ואם אין לה תרגום, שפת הבוט */
+  locale?: string;
+  /** JWT לזיהוי המשתמש, נחתם בשרת של הלקוח עם המפתח הסודי. לעולם לא המפתח הסודי עצמו */
+  userToken?: string | null;
+  userName?: string | null;
+  /** כפתור מסוג screen בתסריט: ניווט למסך באפליקציה */
+  onScreen?: (screen: string, targetId?: string) => void;
+  /** מסכי האפליקציה. נרשמים בשרת, והעורך בלוח הניהול מציע אותם ברשימה */
+  screens?: readonly KavchatScreen[];
+  onEvent?: (event: KavchatEvent) => void;
+  /** ברירת מחדל: AsyncStorage אם מותקן, אחרת זיכרון בלבד */
+  storage?: StorageAdapter;
+  /** עקיפה של הצבעים שמגיעים מההגדרות בלוח הניהול */
+  theme?: Partial<KavchatTheme>;
+  /** להחלפה בבדיקות */
+  fetch?: FetchLike;
+  children?: React.ReactNode;
+}
+
+export interface KavchatContextValue {
+  controller: KavchatController;
+  snapshot: KavchatSnapshot;
+  theme: KavchatTheme;
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+}
+
+const KavchatContext = createContext<KavchatContextValue | null>(null);
+
+export function KavchatProvider(props: KavchatProviderProps) {
+  const { publicKey, apiBase, locale, userToken, userName, onScreen, screens, onEvent, storage, theme, fetch, children } = props;
+  const controllerRef = useRef<KavchatController | null>(null);
+  const keyRef = useRef('');
+  const key = `${publicKey}|${apiBase ?? ''}`;
+  if (!controllerRef.current || keyRef.current !== key) {
+    controllerRef.current?.dispose();
+    keyRef.current = key;
+    controllerRef.current = new KavchatController({
+      publicKey,
+      apiBase,
+      locale,
+      userToken: userToken || undefined,
+      userName: userName || undefined,
+      storage: storage ?? defaultStorage(),
+      deviceLocale: deviceLocale(),
+      screens,
+      fetch,
+    });
+  }
+  const controller = controllerRef.current;
+
+  // callbacks חדשים בכל רינדור לא בונים בקר חדש
+  controller.setCallbacks({
+    onScreen,
+    onEvent,
+    onLink: (url) => {
+      Linking.openURL(url).catch((e: unknown) => console.warn('Kavchat: cannot open link', e));
+    },
+  });
+
+  useEffect(() => {
+    void controller.load();
+    // לא dispose: ב-StrictMode האפקט רץ פעמיים על אותו בקר. רק שולחים את מה שנצבר
+    return () => {
+      void controller.flush();
+    };
+  }, [controller]);
+
+  useEffect(() => {
+    void controller.setUser({ token: userToken, name: userName });
+  }, [controller, userToken, userName]);
+
+  // מערך חדש בכל רינדור לא שולח שוב: משווים לפי התוכן
+  const screensKey = JSON.stringify(screens ?? null);
+  const firstScreens = useRef(true);
+  useEffect(() => {
+    // בבנייה הבקר כבר קיבל את המסכים
+    if (firstScreens.current) {
+      firstScreens.current = false;
+      return;
+    }
+    controller.registerScreens(screens);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [controller, screensKey]);
+
+  useEffect(() => {
+    controller.setLocale(locale);
+  }, [controller, locale]);
+
+  // דיווח המסלול כשהאפליקציה עוברת לרקע, כי ייתכן שלא תחזור
+  useEffect(() => {
+    const sub = AppState.addEventListener('change', (s) => {
+      if (s === 'background' || s === 'inactive') void controller.flush();
+    });
+    return () => sub.remove();
+  }, [controller]);
+
+  const snapshot = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
+  const [isOpen, setOpen] = useState(false);
+  const open = useCallback(() => {
+    controller.ensureConversation();
+    setOpen(true);
+  }, [controller]);
+  const close = useCallback(() => setOpen(false), []);
+  const toggle = useCallback(() => (isOpen ? close() : open()), [isOpen, open, close]);
+
+  const primary = snapshot.release?.settings.primaryColor;
+  const themeKey = JSON.stringify(theme ?? null);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const resolved = useMemo(() => themeFor(primary, theme), [primary, themeKey]);
+
+  const value = useMemo<KavchatContextValue>(
+    () => ({ controller, snapshot, theme: resolved, isOpen: isOpen && snapshot.status === 'ready', open, close, toggle }),
+    [controller, snapshot, resolved, isOpen, open, close, toggle],
+  );
+  return <KavchatContext.Provider value={value}>{children}</KavchatContext.Provider>;
+}
+
+export function useKavchatContext(): KavchatContextValue {
+  const ctx = useContext(KavchatContext);
+  if (!ctx) throw new Error('Kavchat: wrap your app with <KavchatProvider>');
+  return ctx;
+}
+
+/** ה-hook הציבורי: מצב הפתיחה, זמינות הבוט והחלפת משתמש */
+export function useKavchat() {
+  const { controller, snapshot, isOpen, open, close, toggle } = useKavchatContext();
+  return {
+    status: snapshot.status,
+    /** false כשהבוט כבוי, מוגבל למשתמשי בדיקה או שנגמרה המכסה. אז לא מציגים כניסה לצ'אט */
+    available: snapshot.status === 'ready',
+    offline: snapshot.offline,
+    locale: snapshot.locale,
+    isOpen,
+    open,
+    close,
+    toggle,
+    setUser: (user: { token?: string | null; name?: string | null } | null) => controller.setUser(user),
+    startNewConversation: () => controller.startFresh(),
+    openContactForm: (prefill?: string) => {
+      open();
+      controller.openContactForm(prefill);
+    },
+    controller,
+  };
+}