@kavchat/react-native 0.0.2 → 0.0.3

package/src/live/sse.ts

@@ -0,0 +1,196 @@
+/**
+ * לקוח SSE קטן, בלי EventSource (ב-React Native אין כזה) ובלי חיבור מחדש אוטומטי:
+ * הכרטיס חד-פעמי, ולכן ה-session מבקש כרטיס חדש ומתחבר מחדש בעצמו (docs/live-chat-protocol.md 3.4).
+ * התעבורה: XMLHttpRequest עם קבלה הדרגתית (נתמך ב-React Native וב-Hermes), או fetch עם body.getReader
+ * כשאין XMLHttpRequest. אם אין אף אחד, ה-session עובר ל-long-poll
+ */
+
+export interface SseMessage {
+  event: string;
+  data: string;
+  id?: string;
+}
+
+/** מפרק את הזרם לפי המפרט: שורות field: value, הודעה מסתיימת בשורה ריקה, שורה שמתחילה ב-: היא הערה */
+export class SseParser {
+  private buffer = '';
+  private event = '';
+  private data: string[] = [];
+  private id: string | undefined;
+
+  constructor(private onMessage: (m: SseMessage) => void, private onComment?: () => void) {}
+
+  feed(chunk: string) {
+    this.buffer += chunk;
+    for (;;) {
+      const m = /\r\n|\r|\n/.exec(this.buffer);
+      if (!m) break;
+      // \r בסוף החתיכה עשוי להיות חצי של \r\n: מחכים לחתיכה הבאה
+      if (m[0] === '\r' && m.index === this.buffer.length - 1) break;
+      const line = this.buffer.slice(0, m.index);
+      this.buffer = this.buffer.slice(m.index + m[0].length);
+      this.line(line);
+    }
+  }
+
+  private line(line: string) {
+    if (line === '') {
+      if (this.data.length) this.onMessage({ event: this.event || 'message', data: this.data.join('\n'), ...(this.id !== undefined ? { id: this.id } : {}) });
+      this.event = '';
+      this.data = [];
+      this.id = undefined;
+      return;
+    }
+    if (line.startsWith(':')) {
+      this.onComment?.();
+      return;
+    }
+    const i = line.indexOf(':');
+    const field = i < 0 ? line : line.slice(0, i);
+    let value = i < 0 ? '' : line.slice(i + 1);
+    if (value.startsWith(' ')) value = value.slice(1);
+    if (field === 'event') this.event = value;
+    else if (field === 'data') this.data.push(value);
+    else if (field === 'id') this.id = value;
+    // retry ושדות אחרים: מתעלמים. החיבור מחדש בשליטה שלנו
+  }
+}
+
+export interface StreamHandlers {
+  /** כל חתיכת טקסט שהגיעה, כולל הערות keep-alive */
+  onChunk(text: string): void;
+  /** הזרם נכשל לפני שנפתח (status != 200), או נקטע. status 0 = רשת */
+  onError(status: number, body: string): void;
+  /** השרת סגר את הזרם בצורה מסודרת */
+  onEnd(): void;
+}
+
+export interface StreamHandle {
+  close(): void;
+}
+
+/** פותח GET ארוך ומעביר טקסט כפי שהוא מגיע. null כשאין תעבורה מתאימה, ואז עוברים ל-long-poll */
+export type StreamOpener = (url: string, headers: Record<string, string>, handlers: StreamHandlers) => StreamHandle | null;
+
+type XhrLike = {
+  readyState: number;
+  status: number;
+  responseText: string;
+  open(method: string, url: string, async: boolean): void;
+  setRequestHeader(name: string, value: string): void;
+  send(body?: unknown): void;
+  abort(): void;
+  onreadystatechange: (() => void) | null;
+  onprogress: (() => void) | null;
+  onerror: (() => void) | null;
+  ontimeout?: (() => void) | null;
+};
+
+/** XMLHttpRequest עם responseText שגדל (readyState 3). מספיק להגדיר onprogress כדי ש-React Native ישלח עדכונים הדרגתיים */
+export const xhrStream: StreamOpener = (url, headers, h) => {
+  const Xhr = (globalThis as { XMLHttpRequest?: new () => XhrLike }).XMLHttpRequest;
+  if (!Xhr) return null;
+  const xhr = new Xhr();
+  let seen = 0;
+  let done = false;
+  const pump = () => {
+    if (done || xhr.status !== 200) return;
+    const text = xhr.responseText || '';
+    if (text.length > seen) {
+      const chunk = text.slice(seen);
+      seen = text.length;
+      h.onChunk(chunk);
+    }
+  };
+  xhr.onprogress = pump;
+  xhr.onreadystatechange = () => {
+    if (done) return;
+    if (xhr.readyState >= 3) pump();
+    if (xhr.readyState === 4) {
+      done = true;
+      if (xhr.status === 200) h.onEnd();
+      else h.onError(xhr.status, xhr.responseText || '');
+    }
+  };
+  xhr.onerror = () => {
+    if (done) return;
+    done = true;
+    h.onError(0, '');
+  };
+  xhr.ontimeout = xhr.onerror;
+  try {
+    xhr.open('GET', url, true);
+    for (const [k, v] of Object.entries(headers)) xhr.setRequestHeader(k, v);
+    xhr.setRequestHeader('Accept', 'text/event-stream');
+    xhr.send();
+  } catch {
+    done = true;
+    return null;
+  }
+  return {
+    close() {
+      if (done) return;
+      done = true;
+      try {
+        xhr.abort();
+      } catch {
+        // כבר נסגר
+      }
+    },
+  };
+};
+
+type StreamingResponse = {
+  status: number;
+  text(): Promise<string>;
+  body?: { getReader?: () => { read(): Promise<{ done: boolean; value?: Uint8Array }>; cancel(): Promise<void> } } | null;
+};
+
+/** fetch עם ReadableStream (Expo web, סביבות חדשות). בלי getReader אין זרימה, ומחזירים שגיאה כדי לעבור ל-long-poll */
+export function fetchStream(fetchImpl?: (url: string, init: Record<string, unknown>) => Promise<StreamingResponse>): StreamOpener {
+  return (url, headers, h) => {
+    const f = fetchImpl ?? (globalThis.fetch as unknown as ((url: string, init: Record<string, unknown>) => Promise<StreamingResponse>) | undefined);
+    const Ctrl = (globalThis as { AbortController?: new () => { abort(): void; signal: unknown } }).AbortController;
+    const Decoder = (globalThis as { TextDecoder?: new () => { decode(v?: Uint8Array, o?: { stream: boolean }): string } }).TextDecoder;
+    if (!f || !Decoder) return null;
+    const ctrl = Ctrl ? new Ctrl() : null;
+    let done = false;
+    const finish = (fn: () => void) => {
+      if (done) return;
+      done = true;
+      fn();
+    };
+    void (async () => {
+      try {
+        const res = await f(url, { method: 'GET', headers: { ...headers, Accept: 'text/event-stream' }, cache: 'no-store', credentials: 'omit', ...(ctrl ? { signal: ctrl.signal } : {}) });
+        if (res.status !== 200) {
+          const body = await res.text().catch(() => '');
+          return finish(() => h.onError(res.status, body));
+        }
+        const reader = res.body?.getReader?.();
+        if (!reader) return finish(() => h.onError(-1, ''));
+        const decoder = new Decoder();
+        for (;;) {
+          const { done: end, value } = await reader.read();
+          if (done) {
+            void reader.cancel().catch(() => undefined);
+            return;
+          }
+          if (end) return finish(() => h.onEnd());
+          if (value) h.onChunk(decoder.decode(value, { stream: true }));
+        }
+      } catch {
+        finish(() => h.onError(0, ''));
+      }
+    })();
+    return {
+      close() {
+        done = true;
+        ctrl?.abort();
+      },
+    };
+  };
+}
+
+/** ברירת המחדל: XMLHttpRequest אם קיים, אחרת fetch עם זרימה */
+export const defaultStreamOpener: StreamOpener = (url, headers, h) => xhrStream(url, headers, h) ?? fetchStream()(url, headers, h);

package/src/live/texts.ts

@@ -0,0 +1,25 @@
+/**
+ * הטקסטים עצמם ב-@kavchat/core (i18n, המפתחות live.*), כמו בווידג'ט לאתר. כאן רק עיצוב של זמן
+ */
+
+const pad = (n: number) => String(n).padStart(2, '0');
+
+/**
+ * מתי הנציגים חוזרים, בשעון המכשיר ובשפת הממשק: רק שעה אם זה היום, אחרת יום ושעה (כמו בווידג'ט).
+ * בלי Intl (Hermes ישן): HH:MM או DD/MM HH:MM
+ */
+export function formatOpenAt(iso: string, now: number, locale?: string): string {
+  const at = new Date(iso);
+  if (Number.isNaN(at.getTime())) return '';
+  const today = new Date(now);
+  const sameDay = at.getFullYear() === today.getFullYear() && at.getMonth() === today.getMonth() && at.getDate() === today.getDate();
+  if (locale) {
+    try {
+      return new Intl.DateTimeFormat(locale, { ...(sameDay ? {} : { weekday: 'short' }), hour: '2-digit', minute: '2-digit' }).format(at);
+    } catch {
+      // ממשיכים לפורמט הקבוע
+    }
+  }
+  const time = `${pad(at.getHours())}:${pad(at.getMinutes())}`;
+  return sameDay ? time : `${pad(at.getDate())}/${pad(at.getMonth() + 1)} ${time}`;
+}

package/src/ui/KavchatChat.tsx

@@ -14,12 +14,14 @@ import {
   View,
 } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { format } from '@kavchat/core';
+import { format, liveUnavailableText } from '@kavchat/core';
 import type { BotChip, BotMessage } from '@kavchat/core';
 import { BRANDING_URL } from '../controller';
 import { safeUrl, splitLinks } from '../text';
 import type { KavchatTheme } from '../theme';
 import { useKavchatContext } from './KavchatProvider';
+import { LiveChatView, LiveRequestForm } from './LiveChatView';
+import { formatOpenAt } from '../live/texts';
 
 /**
  * מסך הצ'אט. כיוון הפריסה נקבע לפי I18nManager של האפליקציה המארחת, ולא כופים RTL.
@@ -86,7 +88,17 @@ export function KavchatChat({ onClose, hideHeader, style }: KavchatChatProps) {
           <Text style={styles.bannerText}>{t['widget.offline']}</Text>
         </View>
       ) : null}
-      {snapshot.view === 'chat' ? <ChatView /> : snapshot.view === 'form' ? <ContactForm /> : <SentView />}
+      {snapshot.view === 'chat' ? (
+        <ChatView />
+      ) : snapshot.view === 'form' ? (
+        <ContactForm />
+      ) : snapshot.view === 'live' ? (
+        <LiveChatView />
+      ) : snapshot.view === 'liveForm' ? (
+        <LiveRequestForm />
+      ) : (
+        <SentView />
+      )}
       {s.removeBranding ? null : (
         // בתוכנית החינמית הסמל חובה
         <Pressable onPress={() => Linking.openURL(BRANDING_URL).catch(() => undefined)} accessibilityRole="link" style={styles.badge}>
@@ -103,6 +115,8 @@ function ChatView() {
   const [text, setText] = useState('');
   const scroll = useRef<ComponentRef<typeof ScrollView>>(null);
   const conv = snapshot.conversation;
+  // כולל "שיחה עם נציג" לפני "פנייה לצוות" כשיש נציג זמין
+  const chips = conv ? controller.chips() : [];
 
   const typing = snapshot.typing;
   const send = () => {
@@ -129,9 +143,9 @@ function ChatView() {
             <ActivityIndicator size="small" color={theme.accent} />
           </View>
         ) : null}
-        {conv && conv.chips.length > 0 ? (
+        {chips.length > 0 ? (
           <View style={styles.chips} accessibilityRole="menu">
-            {conv.chips.map((chip) => (
+            {chips.map((chip) => (
               <ChipButton key={chip.id} label={chip.label} theme={theme} fixed={isFixed(chip)} onPress={() => controller.pressChip(chip)} />
             ))}
           </View>
@@ -216,11 +230,13 @@ function ContactForm() {
   const effect = snapshot.contact;
   const topics = snapshot.release?.settings.contactTopics ?? [];
   const initialTopic = effect?.contactTopicId && topics.some((x) => x.id === effect.contactTopicId) ? effect.contactTopicId : '';
-  const [name, setName] = useState(snapshot.userName ?? '');
-  const [email, setEmail] = useState('');
-  const [phone, setPhone] = useState('');
+  // אחרי בקשה לנציג שלא נענתה: מה שכבר נכתב שם
+  const pre = snapshot.contactPrefill;
+  const [name, setName] = useState(pre?.name ?? snapshot.userName ?? '');
+  const [email, setEmail] = useState(pre?.email ?? '');
+  const [phone, setPhone] = useState(pre?.phone ?? '');
   const [topicId, setTopicId] = useState(initialTopic);
-  const [message, setMessage] = useState(effect?.prefill ?? '');
+  const [message, setMessage] = useState(pre?.message ?? effect?.prefill ?? '');
   const [error, setError] = useState('');
   const [sending, setSending] = useState(false);
 
@@ -233,12 +249,24 @@ function ContactForm() {
     if (problem) setError(problem);
   };
 
+  // כשהצ'אט עם נציג דלוק ואין מי שיענה: שורת הסבר מעל הטופס (closed, no_agents). quota ו-disabled בלי הסבר
+  const offer = snapshot.liveEnabled ? snapshot.liveOffer : null;
+  const note =
+    offer && !offer.open && !offer.checking
+      ? liveUnavailableText(offer.reason, t, offer.reason === 'closed' && offer.nextOpenAt ? formatOpenAt(offer.nextOpenAt, Date.now(), snapshot.locale) || null : null)
+      : '';
+
   const inputStyle = [styles.field, { color: theme.text }];
   return (
     <ScrollView style={styles.flex} contentContainerStyle={styles.form} keyboardShouldPersistTaps="handled">
       <Text style={[styles.formTitle, { color: theme.text }]} accessibilityRole="header">
         {t['form.title']}
       </Text>
+      {note ? (
+        <Text style={[styles.reason, { color: theme.muted }]} accessibilityLiveRegion="polite">
+          {note}
+        </Text>
+      ) : null}
       <Label text={t['form.name']} theme={theme} />
       <TextInput value={name} onChangeText={setName} maxLength={100} autoComplete="name" textContentType="name" style={inputStyle} accessibilityLabel={t['form.name']} />
       <Label text={t['form.email']} theme={theme} />
@@ -373,6 +401,7 @@ const styles = StyleSheet.create({
   field: { borderWidth: 1, borderColor: '#d1d5db', borderRadius: 8, paddingHorizontal: 10, paddingVertical: Platform.OS === 'ios' ? 10 : 6, fontSize: 15, backgroundColor: '#ffffff' },
   message: { minHeight: 110, textAlignVertical: 'top' },
   error: { fontSize: 14, marginTop: 6 },
+  reason: { fontSize: 14, marginTop: 8 },
   actions: { flexDirection: 'row', gap: 10, marginTop: 12 },
   btn: { borderRadius: 8, paddingHorizontal: 18, paddingVertical: 10, alignItems: 'center' },
   btnGhost: { borderWidth: 1, backgroundColor: 'transparent' },

package/src/ui/KavchatProvider.tsx

@@ -28,6 +28,13 @@ export interface KavchatProviderProps {
   onEvent?: (event: KavchatEvent) => void;
   /** ברירת מחדל: AsyncStorage אם מותקן, אחרת זיכרון בלבד */
   storage?: StorageAdapter;
+  /**
+   * אחסון לקרדנשל של הצ'אט עם נציג. מומלץ אחסון מאובטח (expo-secure-store, react-native-keychain).
+   * ברירת מחדל: storage
+   */
+  secureStorage?: StorageAdapter;
+  /** שם המסך שנשלח עם הבקשה לנציג, למשל 'checkout' */
+  livePage?: string;
   /** עקיפה של הצבעים שמגיעים מההגדרות בלוח הניהול */
   theme?: Partial<KavchatTheme>;
   /** להחלפה בבדיקות */
@@ -48,7 +55,7 @@ export interface KavchatContextValue {
 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 { publicKey, apiBase, locale, userToken, userName, onScreen, screens, onEvent, storage, secureStorage, livePage, theme, fetch, children } = props;
   const controllerRef = useRef<KavchatController | null>(null);
   const keyRef = useRef('');
   const key = `${publicKey}|${apiBase ?? ''}`;
@@ -62,6 +69,8 @@ export function KavchatProvider(props: KavchatProviderProps) {
       userToken: userToken || undefined,
       userName: userName || undefined,
       storage: storage ?? defaultStorage(),
+      secureStorage,
+      livePage,
       deviceLocale: deviceLocale(),
       screens,
       fetch,
@@ -107,10 +116,13 @@ export function KavchatProvider(props: KavchatProviderProps) {
     controller.setLocale(locale);
   }, [controller, locale]);
 
-  // דיווח המסלול כשהאפליקציה עוברת לרקע, כי ייתכן שלא תחזור
+  // דיווח המסלול כשהאפליקציה עוברת לרקע, כי ייתכן שלא תחזור.
+  // הצ'אט עם הנציג: הזרם נסגר ברקע, ובחזרה מושלם לפי seq (אין התראות push בגרסה הזו)
   useEffect(() => {
     const sub = AppState.addEventListener('change', (s) => {
       if (s === 'background' || s === 'inactive') void controller.flush();
+      if (s === 'background') controller.setForeground(false);
+      if (s === 'active') controller.setForeground(true);
     });
     return () => sub.remove();
   }, [controller]);
@@ -161,6 +173,13 @@ export function useKavchat() {
       open();
       controller.openContactForm(prefill);
     },
+    /** "שיחה עם נציג" מכפתור באפליקציה: טופס הבקשה אם יש נציג זמין, אחרת טופס הפנייה עם הסבר */
+    openLive: () => {
+      open();
+      void controller.openLive();
+    },
+    /** שלב הצ'אט עם הנציג (queued, active...), או null */
+    livePhase: snapshot.live?.phase ?? null,
     controller,
   };
 }