@kavchat/react-native 0.0.2 → 0.0.3

package/lib/live/sse.d.ts

@@ -0,0 +1,56 @@
+/**
+ * לקוח 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 declare class SseParser {
+    private onMessage;
+    private onComment?;
+    private buffer;
+    private event;
+    private data;
+    private id;
+    constructor(onMessage: (m: SseMessage) => void, onComment?: (() => void) | undefined);
+    feed(chunk: string): void;
+    private line;
+}
+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;
+/** XMLHttpRequest עם responseText שגדל (readyState 3). מספיק להגדיר onprogress כדי ש-React Native ישלח עדכונים הדרגתיים */
+export declare const xhrStream: StreamOpener;
+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 declare function fetchStream(fetchImpl?: (url: string, init: Record<string, unknown>) => Promise<StreamingResponse>): StreamOpener;
+/** ברירת המחדל: XMLHttpRequest אם קיים, אחרת fetch עם זרימה */
+export declare const defaultStreamOpener: StreamOpener;
+export {};

package/lib/live/sse.js

@@ -0,0 +1,173 @@
+/**
+ * לקוח SSE קטן, בלי EventSource (ב-React Native אין כזה) ובלי חיבור מחדש אוטומטי:
+ * הכרטיס חד-פעמי, ולכן ה-session מבקש כרטיס חדש ומתחבר מחדש בעצמו (docs/live-chat-protocol.md 3.4).
+ * התעבורה: XMLHttpRequest עם קבלה הדרגתית (נתמך ב-React Native וב-Hermes), או fetch עם body.getReader
+ * כשאין XMLHttpRequest. אם אין אף אחד, ה-session עובר ל-long-poll
+ */
+/** מפרק את הזרם לפי המפרט: שורות field: value, הודעה מסתיימת בשורה ריקה, שורה שמתחילה ב-: היא הערה */
+export class SseParser {
+    constructor(onMessage, onComment) {
+        this.onMessage = onMessage;
+        this.onComment = onComment;
+        this.buffer = '';
+        this.event = '';
+        this.data = [];
+    }
+    feed(chunk) {
+        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);
+        }
+    }
+    line(line) {
+        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 ושדות אחרים: מתעלמים. החיבור מחדש בשליטה שלנו
+    }
+}
+/** XMLHttpRequest עם responseText שגדל (readyState 3). מספיק להגדיר onprogress כדי ש-React Native ישלח עדכונים הדרגתיים */
+export const xhrStream = (url, headers, h) => {
+    const Xhr = globalThis.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 {
+                // כבר נסגר
+            }
+        },
+    };
+};
+/** fetch עם ReadableStream (Expo web, סביבות חדשות). בלי getReader אין זרימה, ומחזירים שגיאה כדי לעבור ל-long-poll */
+export function fetchStream(fetchImpl) {
+    return (url, headers, h) => {
+        const f = fetchImpl ?? globalThis.fetch;
+        const Ctrl = globalThis.AbortController;
+        const Decoder = globalThis.TextDecoder;
+        if (!f || !Decoder)
+            return null;
+        const ctrl = Ctrl ? new Ctrl() : null;
+        let done = false;
+        const finish = (fn) => {
+            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 = (url, headers, h) => xhrStream(url, headers, h) ?? fetchStream()(url, headers, h);

package/lib/live/texts.d.ts

@@ -0,0 +1,8 @@
+/**
+ * הטקסטים עצמם ב-@kavchat/core (i18n, המפתחות live.*), כמו בווידג'ט לאתר. כאן רק עיצוב של זמן
+ */
+/**
+ * מתי הנציגים חוזרים, בשעון המכשיר ובשפת הממשק: רק שעה אם זה היום, אחרת יום ושעה (כמו בווידג'ט).
+ * בלי Intl (Hermes ישן): HH:MM או DD/MM HH:MM
+ */
+export declare function formatOpenAt(iso: string, now: number, locale?: string): string;

package/lib/live/texts.js

@@ -0,0 +1,25 @@
+/**
+ * הטקסטים עצמם ב-@kavchat/core (i18n, המפתחות live.*), כמו בווידג'ט לאתר. כאן רק עיצוב של זמן
+ */
+const pad = (n) => String(n).padStart(2, '0');
+/**
+ * מתי הנציגים חוזרים, בשעון המכשיר ובשפת הממשק: רק שעה אם זה היום, אחרת יום ושעה (כמו בווידג'ט).
+ * בלי Intl (Hermes ישן): HH:MM או DD/MM HH:MM
+ */
+export function formatOpenAt(iso, now, locale) {
+    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/lib/ui/KavchatChat.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { ActivityIndicator, Image, KeyboardAvoidingView, Linking, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, } from 'react-native';
-import { format } from '@kavchat/core';
+import { format, liveUnavailableText } from '@kavchat/core';
 import { BRANDING_URL } from '../controller';
 import { safeUrl, splitLinks } from '../text';
 import { useKavchatContext } from './KavchatProvider';
+import { LiveChatView, LiveRequestForm } from './LiveChatView';
+import { formatOpenAt } from '../live/texts';
 export function KavchatChat({ onClose, hideHeader, style }) {
     const { controller, snapshot, theme } = useKavchatContext();
     const t = snapshot.texts;
@@ -18,7 +20,7 @@ export function KavchatChat({ onClose, hideHeader, style }) {
         return (_jsxs(View, { style: [styles.center, { backgroundColor: theme.background }, style], children: [_jsx(Text, { style: [styles.body, { color: theme.text }], children: t['widget.unavailable'] }), onClose ? _jsx(ChipButton, { label: t['widget.close'], theme: theme, onPress: onClose }) : null] }));
     }
     const s = snapshot.release.settings;
-    return (_jsxs(KeyboardAvoidingView, { style: [styles.flex, { backgroundColor: theme.background }, style], behavior: Platform.OS === 'ios' ? 'padding' : undefined, children: [hideHeader ? null : (_jsxs(View, { style: [styles.header, { backgroundColor: theme.primary }], children: [_jsx(Avatar, { text: s.avatarText || s.botName || '', imageUrl: s.avatarImageUrl, theme: theme }), _jsxs(View, { style: styles.titles, children: [_jsx(Text, { style: [styles.title, { color: theme.onPrimary }], numberOfLines: 1, accessibilityRole: "header", children: s.botName }), s.subtitle ? (_jsx(Text, { style: [styles.subtitle, { color: theme.onPrimary }], numberOfLines: 1, children: s.subtitle })) : null] }), onClose ? (_jsx(Pressable, { onPress: onClose, hitSlop: 12, accessibilityRole: "button", accessibilityLabel: t['widget.close'], style: styles.close, children: _jsx(Text, { style: [styles.closeText, { color: theme.onPrimary }], children: '×' }) })) : null] })), snapshot.offline ? (_jsx(View, { style: styles.banner, accessibilityRole: "alert", children: _jsx(Text, { style: styles.bannerText, children: t['widget.offline'] }) })) : null, snapshot.view === 'chat' ? _jsx(ChatView, {}) : snapshot.view === 'form' ? _jsx(ContactForm, {}) : _jsx(SentView, {}), s.removeBranding ? null : (
+    return (_jsxs(KeyboardAvoidingView, { style: [styles.flex, { backgroundColor: theme.background }, style], behavior: Platform.OS === 'ios' ? 'padding' : undefined, children: [hideHeader ? null : (_jsxs(View, { style: [styles.header, { backgroundColor: theme.primary }], children: [_jsx(Avatar, { text: s.avatarText || s.botName || '', imageUrl: s.avatarImageUrl, theme: theme }), _jsxs(View, { style: styles.titles, children: [_jsx(Text, { style: [styles.title, { color: theme.onPrimary }], numberOfLines: 1, accessibilityRole: "header", children: s.botName }), s.subtitle ? (_jsx(Text, { style: [styles.subtitle, { color: theme.onPrimary }], numberOfLines: 1, children: s.subtitle })) : null] }), onClose ? (_jsx(Pressable, { onPress: onClose, hitSlop: 12, accessibilityRole: "button", accessibilityLabel: t['widget.close'], style: styles.close, children: _jsx(Text, { style: [styles.closeText, { color: theme.onPrimary }], children: '×' }) })) : null] })), snapshot.offline ? (_jsx(View, { style: styles.banner, accessibilityRole: "alert", children: _jsx(Text, { style: styles.bannerText, children: t['widget.offline'] }) })) : null, snapshot.view === 'chat' ? (_jsx(ChatView, {})) : snapshot.view === 'form' ? (_jsx(ContactForm, {})) : snapshot.view === 'live' ? (_jsx(LiveChatView, {})) : snapshot.view === 'liveForm' ? (_jsx(LiveRequestForm, {})) : (_jsx(SentView, {})), s.removeBranding ? null : (
             // בתוכנית החינמית הסמל חובה
             _jsx(Pressable, { onPress: () => Linking.openURL(BRANDING_URL).catch(() => undefined), accessibilityRole: "link", style: styles.badge, children: _jsx(Text, { style: [styles.badgeText, { color: theme.muted }], children: t['widget.poweredBy'] }) }))] }));
 }
@@ -28,6 +30,8 @@ function ChatView() {
     const [text, setText] = useState('');
     const scroll = useRef(null);
     const conv = snapshot.conversation;
+    // כולל "שיחה עם נציג" לפני "פנייה לצוות" כשיש נציג זמין
+    const chips = conv ? controller.chips() : [];
     const typing = snapshot.typing;
     const send = () => {
         if (typing)
@@ -36,7 +40,7 @@ function ChatView() {
         setText('');
         void controller.sendText(value);
     };
-    return (_jsxs(View, { style: styles.flex, children: [_jsxs(ScrollView, { ref: scroll, style: styles.flex, contentContainerStyle: styles.list, onContentSizeChange: () => scroll.current?.scrollToEnd({ animated: true }), keyboardShouldPersistTaps: "handled", children: [(conv?.messages ?? []).map((m) => (_jsx(Bubble, { message: m, theme: theme, aiLabel: t['chat.aiLabel'] }, m.id))), typing ? (_jsx(View, { style: [styles.bubble, styles.botBubble, { backgroundColor: theme.botBubble }], accessibilityLabel: t['widget.loading'], accessibilityLiveRegion: "polite", children: _jsx(ActivityIndicator, { size: "small", color: theme.accent }) })) : null, conv && conv.chips.length > 0 ? (_jsx(View, { style: styles.chips, accessibilityRole: "menu", children: conv.chips.map((chip) => (_jsx(ChipButton, { label: chip.label, theme: theme, fixed: isFixed(chip), onPress: () => controller.pressChip(chip) }, chip.id))) })) : null] }), _jsxs(View, { style: styles.composer, children: [_jsx(TextInput, { value: text, onChangeText: setText, onSubmitEditing: send, placeholder: t['widget.placeholder'], accessibilityLabel: t['widget.placeholder'], placeholderTextColor: theme.muted, maxLength: 500, returnKeyType: "send", blurOnSubmit: false, style: [styles.input, { color: theme.text }] }), _jsx(Pressable, { onPress: send, disabled: !text.trim() || typing, accessibilityRole: "button", accessibilityLabel: t['widget.send'], style: [styles.send, { backgroundColor: theme.primary }, (!text.trim() || typing) && styles.disabled], children: _jsx(SendIcon, { color: theme.onPrimary }) })] })] }));
+    return (_jsxs(View, { style: styles.flex, children: [_jsxs(ScrollView, { ref: scroll, style: styles.flex, contentContainerStyle: styles.list, onContentSizeChange: () => scroll.current?.scrollToEnd({ animated: true }), keyboardShouldPersistTaps: "handled", children: [(conv?.messages ?? []).map((m) => (_jsx(Bubble, { message: m, theme: theme, aiLabel: t['chat.aiLabel'] }, m.id))), typing ? (_jsx(View, { style: [styles.bubble, styles.botBubble, { backgroundColor: theme.botBubble }], accessibilityLabel: t['widget.loading'], accessibilityLiveRegion: "polite", children: _jsx(ActivityIndicator, { size: "small", color: theme.accent }) })) : null, chips.length > 0 ? (_jsx(View, { style: styles.chips, accessibilityRole: "menu", children: chips.map((chip) => (_jsx(ChipButton, { label: chip.label, theme: theme, fixed: isFixed(chip), onPress: () => controller.pressChip(chip) }, chip.id))) })) : null] }), _jsxs(View, { style: styles.composer, children: [_jsx(TextInput, { value: text, onChangeText: setText, onSubmitEditing: send, placeholder: t['widget.placeholder'], accessibilityLabel: t['widget.placeholder'], placeholderTextColor: theme.muted, maxLength: 500, returnKeyType: "send", blurOnSubmit: false, style: [styles.input, { color: theme.text }] }), _jsx(Pressable, { onPress: send, disabled: !text.trim() || typing, accessibilityRole: "button", accessibilityLabel: t['widget.send'], style: [styles.send, { backgroundColor: theme.primary }, (!text.trim() || typing) && styles.disabled], children: _jsx(SendIcon, { color: theme.onPrimary }) })] })] }));
 }
 const isFixed = (chip) => chip.kind === 'back' || chip.kind === 'home';
 function Bubble({ message, theme, aiLabel }) {
@@ -62,11 +66,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);
     const submit = async () => {
@@ -79,8 +85,13 @@ 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 (_jsxs(ScrollView, { style: styles.flex, contentContainerStyle: styles.form, keyboardShouldPersistTaps: "handled", children: [_jsx(Text, { style: [styles.formTitle, { color: theme.text }], accessibilityRole: "header", children: t['form.title'] }), _jsx(Label, { text: t['form.name'], theme: theme }), _jsx(TextInput, { value: name, onChangeText: setName, maxLength: 100, autoComplete: "name", textContentType: "name", style: inputStyle, accessibilityLabel: t['form.name'] }), _jsx(Label, { text: t['form.email'], theme: theme }), _jsx(TextInput, { value: email, onChangeText: setEmail, keyboardType: "email-address", autoCapitalize: "none", autoComplete: "email", textContentType: "emailAddress", style: inputStyle, accessibilityLabel: t['form.email'] }), _jsx(Label, { text: t['form.phone'], theme: theme }), _jsx(TextInput, { value: phone, onChangeText: setPhone, keyboardType: "phone-pad", autoComplete: "tel", textContentType: "telephoneNumber", style: inputStyle, accessibilityLabel: t['form.phone'] }), topics.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Label, { text: t['form.topic'], theme: theme }), _jsx(View, { style: styles.chips, accessibilityRole: "radiogroup", children: topics.map((tp) => {
+    return (_jsxs(ScrollView, { style: styles.flex, contentContainerStyle: styles.form, keyboardShouldPersistTaps: "handled", children: [_jsx(Text, { style: [styles.formTitle, { color: theme.text }], accessibilityRole: "header", children: t['form.title'] }), note ? (_jsx(Text, { style: [styles.reason, { color: theme.muted }], accessibilityLiveRegion: "polite", children: note })) : null, _jsx(Label, { text: t['form.name'], theme: theme }), _jsx(TextInput, { value: name, onChangeText: setName, maxLength: 100, autoComplete: "name", textContentType: "name", style: inputStyle, accessibilityLabel: t['form.name'] }), _jsx(Label, { text: t['form.email'], theme: theme }), _jsx(TextInput, { value: email, onChangeText: setEmail, keyboardType: "email-address", autoCapitalize: "none", autoComplete: "email", textContentType: "emailAddress", style: inputStyle, accessibilityLabel: t['form.email'] }), _jsx(Label, { text: t['form.phone'], theme: theme }), _jsx(TextInput, { value: phone, onChangeText: setPhone, keyboardType: "phone-pad", autoComplete: "tel", textContentType: "telephoneNumber", style: inputStyle, accessibilityLabel: t['form.phone'] }), topics.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Label, { text: t['form.topic'], theme: theme }), _jsx(View, { style: styles.chips, accessibilityRole: "radiogroup", children: topics.map((tp) => {
                             const on = tp.id === topicId;
                             return (_jsx(Pressable, { onPress: () => setTopicId(on ? '' : tp.id), accessibilityRole: "radio", accessibilityState: { checked: on }, style: [styles.chip, { borderColor: theme.accent }, on && { backgroundColor: theme.primary, borderColor: theme.primary }], children: _jsx(Text, { style: [styles.chipText, { color: on ? theme.onPrimary : theme.accent }], children: tp.name }) }, tp.id));
                         }) })] })) : null, _jsx(Label, { text: t['form.message'], theme: theme }), _jsx(TextInput, { value: message, onChangeText: setMessage, multiline: true, maxLength: 2000, style: [inputStyle, styles.message], accessibilityLabel: t['form.message'] }), error ? (_jsx(Text, { style: [styles.error, { color: theme.error }], accessibilityRole: "alert", accessibilityLiveRegion: "polite", children: error })) : null, _jsxs(View, { style: styles.actions, children: [_jsx(Pressable, { onPress: submit, disabled: sending, accessibilityRole: "button", accessibilityState: { disabled: sending, busy: sending }, style: [styles.btn, { backgroundColor: theme.primary }, sending && styles.disabled], children: _jsx(Text, { style: [styles.btnText, { color: theme.onPrimary }], children: sending ? t['form.sending'] : t['form.submit'] }) }), _jsx(Pressable, { onPress: () => controller.backToChat(), accessibilityRole: "button", style: [styles.btn, styles.btnGhost, { borderColor: theme.accent }], children: _jsx(Text, { style: [styles.btnText, { color: theme.accent }], children: t['form.cancel'] }) })] })] }));
@@ -140,6 +151,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/lib/ui/KavchatProvider.d.ts

@@ -24,6 +24,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>;
     /** להחלפה בבדיקות */
@@ -58,5 +65,9 @@ export declare function useKavchat(): {
     } | null) => Promise<void>;
     startNewConversation: () => void;
     openContactForm: (prefill?: string) => void;
+    /** "שיחה עם נציג" מכפתור באפליקציה: טופס הבקשה אם יש נציג זמין, אחרת טופס הפנייה עם הסבר */
+    openLive: () => void;
+    /** שלב הצ'אט עם הנציג (queued, active...), או null */
+    livePhase: import("..").LivePhase | null;
     controller: KavchatController;
 };

package/lib/ui/KavchatProvider.js

@@ -7,7 +7,7 @@ import { deviceLocale } from '../text';
 import { themeFor } from '../theme';
 const KavchatContext = createContext(null);
 export function KavchatProvider(props) {
-    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(null);
     const keyRef = useRef('');
     const key = `${publicKey}|${apiBase ?? ''}`;
@@ -21,6 +21,8 @@ export function KavchatProvider(props) {
             userToken: userToken || undefined,
             userName: userName || undefined,
             storage: storage ?? defaultStorage(),
+            secureStorage,
+            livePage,
             deviceLocale: deviceLocale(),
             screens,
             fetch,
@@ -60,11 +62,16 @@ export function KavchatProvider(props) {
     useEffect(() => {
         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]);
@@ -108,6 +115,13 @@ export function useKavchat() {
             open();
             controller.openContactForm(prefill);
         },
+        /** "שיחה עם נציג" מכפתור באפליקציה: טופס הבקשה אם יש נציג זמין, אחרת טופס הפנייה עם הסבר */
+        openLive: () => {
+            open();
+            void controller.openLive();
+        },
+        /** שלב הצ'אט עם הנציג (queued, active...), או null */
+        livePhase: snapshot.live?.phase ?? null,
         controller,
     };
 }

package/lib/ui/LiveChatView.d.ts

@@ -0,0 +1,8 @@
+/**
+ * הצ'אט עם הנציג: שורת מצב (המתנה עם ספירה לאחור, שם הנציג, או המצב הסופי), הודעות, הקלדה,
+ * "להשאיר הודעה במקום", סיום, וחזרה לבוט. הטקסטים והשורות מ-@kavchat/core, כמו בווידג'ט לאתר.
+ * טקסט פשוט בלבד: הודעות הנציג לא הופכות לקישורים
+ */
+export declare function LiveChatView(): import("react").JSX.Element | null;
+/** טופס הבקשה לנציג: אורח משאיר שם ומייל או טלפון, בחירת מחלקה אם יש יותר מאחת, והודעה ראשונה (לא חובה) */
+export declare function LiveRequestForm(): import("react").JSX.Element;

package/lib/ui/LiveChatView.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
+import { LIVE_MESSAGE_MAX, liveLines, liveStatus } from '@kavchat/core';
+import { useKavchatContext } from './KavchatProvider';
+/**
+ * הצ'אט עם הנציג: שורת מצב (המתנה עם ספירה לאחור, שם הנציג, או המצב הסופי), הודעות, הקלדה,
+ * "להשאיר הודעה במקום", סיום, וחזרה לבוט. הטקסטים והשורות מ-@kavchat/core, כמו בווידג'ט לאתר.
+ * טקסט פשוט בלבד: הודעות הנציג לא הופכות לקישורים
+ */
+export function LiveChatView() {
+    const { controller, snapshot, theme } = useKavchatContext();
+    const live = snapshot.live;
+    const t = snapshot.texts;
+    const [text, setText] = useState('');
+    const [error, setError] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [now, setNow] = useState(Date.now());
+    const scroll = useRef(null);
+    const queued = live?.phase === 'queued';
+    // הספירה לאחור מתעדכנת כל שנייה, רק בזמן ההמתנה
+    useEffect(() => {
+        if (!queued)
+            return;
+        const id = setInterval(() => setNow(Date.now()), 1000);
+        return () => clearInterval(id);
+    }, [queued]);
+    if (!live)
+        return null;
+    const open = live.phase === 'queued' || live.phase === 'active';
+    const send = () => {
+        const problem = controller.liveSend(text);
+        if (problem) {
+            // הטקסט נשאר בשדה
+            setError(problem);
+            return;
+        }
+        setError('');
+        setText('');
+    };
+    const run = async (fn) => {
+        if (busy)
+            return;
+        setBusy(true);
+        try {
+            await fn();
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsxs(View, { style: styles.flex, children: [_jsxs(View, { style: styles.status, children: [_jsx(Text, { style: [styles.statusText, { color: theme.text }], accessibilityRole: "header", accessibilityLiveRegion: "polite", children: statusText(live, t, now) }), open ? (_jsx(Pressable, { onPress: () => run(() => controller.liveEnd()), disabled: busy, accessibilityRole: "button", hitSlop: 8, style: [styles.small, { borderColor: theme.accent }], children: _jsx(Text, { style: [styles.smallText, { color: theme.accent }], children: t['live.end'] }) })) : null] }), live.connection === 'reconnecting' && open ? (_jsx(View, { style: styles.banner, accessibilityRole: "alert", children: _jsx(Text, { style: styles.bannerText, children: t['live.reconnecting'] }) })) : null, _jsxs(ScrollView, { ref: scroll, style: styles.flex, contentContainerStyle: styles.list, onContentSizeChange: () => scroll.current?.scrollToEnd({ animated: true }), keyboardShouldPersistTaps: "handled", children: [liveLines(live.chat, t).map((line) => (_jsx(Line, { line: line, theme: theme, t: t, onRetry: line.clientId ? () => controller.liveRetry(line.clientId) : undefined }, line.key))), live.agentTyping !== null && live.phase === 'active' ? (_jsx(Text, { style: [styles.typing, { color: theme.muted }], accessibilityLiveRegion: "polite", children: t['live.typing'] })) : null, queued ? (_jsx(Pressable, { onPress: () => run(() => controller.liveLeaveMessage()), disabled: busy, accessibilityRole: "button", style: [styles.btn, styles.btnGhost, styles.leave, { borderColor: theme.accent }, busy && styles.disabled], children: _jsx(Text, { style: [styles.btnText, { color: theme.accent }], children: t['live.leave'] }) })) : null, !open ? (_jsx(View, { style: styles.final, children: _jsx(Pressable, { onPress: () => controller.closeLive(), accessibilityRole: "button", style: [styles.btn, { backgroundColor: theme.primary }], children: _jsx(Text, { style: [styles.btnText, { color: theme.onPrimary }], children: t['live.back'] }) }) })) : null] }), error ? (_jsx(Text, { style: [styles.error, { color: theme.error }], accessibilityRole: "alert", children: error })) : null, open ? (_jsxs(View, { style: styles.composer, children: [_jsx(TextInput, { value: text, onChangeText: (v) => {
+                            setText(v);
+                            controller.liveTyping(v);
+                        }, onSubmitEditing: send, placeholder: t['live.placeholder'], accessibilityLabel: t['live.placeholder'], placeholderTextColor: theme.muted, maxLength: LIVE_MESSAGE_MAX, returnKeyType: "send", blurOnSubmit: false, style: [styles.input, { color: theme.text }] }), _jsx(Pressable, { onPress: send, disabled: !text.trim(), accessibilityRole: "button", accessibilityLabel: t['widget.send'], style: [styles.send, { backgroundColor: theme.primary }, !text.trim() && styles.disabled], children: _jsx(View, { style: [styles.sendIcon, { borderStartColor: theme.onPrimary }] }) })] })) : null] }));
+}
+/** שורת המצב של המכונה המשותפת, ושני מצבים שלא באים מהשרת: הוחלף במכשיר אחר, או פג */
+function statusText(live, t, now) {
+    if (live.phase === 'replaced')
+        return t['live.replaced'];
+    if (live.phase === 'expired')
+        return t['live.ended'];
+    return liveStatus(live.conversation, t, now);
+}
+function Line({ line, theme, t, onRetry }) {
+    if (line.kind === 'system')
+        return _jsx(Text, { style: [styles.system, { color: theme.muted }], children: line.text });
+    const mine = line.kind === 'visitor';
+    const failed = line.status === 'failed';
+    const bubble = (_jsxs(_Fragment, { children: [!mine && line.name ? _jsx(Text, { style: [styles.author, { color: theme.muted }], children: line.name }) : null, _jsx(Text, { style: [styles.body, { color: theme.text }], selectable: !line.status, children: line.text }), failed ? _jsx(Text, { style: [styles.meta, { color: theme.error }], children: t['live.failed'] }) : null] }));
+    const style = [styles.bubble, mine ? [styles.mine, { backgroundColor: theme.userBubble }] : [styles.theirs, { backgroundColor: theme.botBubble }], line.status === 'sending' && styles.sending];
+    if (failed && onRetry) {
+        return (_jsx(Pressable, { onPress: onRetry, accessibilityRole: "button", accessibilityHint: t['live.failed'], style: style, children: bubble }));
+    }
+    return _jsx(View, { style: style, children: bubble });
+}
+/** טופס הבקשה לנציג: אורח משאיר שם ומייל או טלפון, בחירת מחלקה אם יש יותר מאחת, והודעה ראשונה (לא חובה) */
+export function LiveRequestForm() {
+    const { controller, snapshot, theme } = useKavchatContext();
+    const t = snapshot.texts;
+    const guest = !snapshot.identified;
+    const departments = snapshot.liveOffer?.departments ?? [];
+    const [name, setName] = useState(snapshot.userName ?? '');
+    const [email, setEmail] = useState('');
+    const [phone, setPhone] = useState('');
+    const [message, setMessage] = useState(snapshot.contact?.prefill ?? '');
+    const [departmentId, setDepartmentId] = useState(departments[0]?.id ?? '');
+    const [error, setError] = useState('');
+    const [sending, setSending] = useState(false);
+    const submit = async () => {
+        if (sending)
+            return;
+        setSending(true);
+        setError('');
+        const problem = await controller.requestLive({ name, email, phone, message, departmentId: departmentId || undefined });
+        setSending(false);
+        if (problem)
+            setError(problem);
+    };
+    const field = [styles.field, { color: theme.text }];
+    return (_jsxs(ScrollView, { style: styles.flex, contentContainerStyle: styles.form, keyboardShouldPersistTaps: "handled", children: [_jsx(Text, { style: [styles.formTitle, { color: theme.text }], accessibilityRole: "header", children: t['live.talk'] }), guest ? (_jsxs(_Fragment, { children: [_jsx(Text, { style: [styles.note, { color: theme.muted }], children: t['live.intro'] }), _jsx(Text, { style: [styles.label, { color: theme.muted }], children: t['form.name'] }), _jsx(TextInput, { value: name, onChangeText: setName, maxLength: 100, autoComplete: "name", textContentType: "name", style: field, accessibilityLabel: t['form.name'] }), _jsx(Text, { style: [styles.label, { color: theme.muted }], children: t['form.email'] }), _jsx(TextInput, { value: email, onChangeText: setEmail, keyboardType: "email-address", autoCapitalize: "none", autoComplete: "email", textContentType: "emailAddress", style: field, accessibilityLabel: t['form.email'] }), _jsx(Text, { style: [styles.label, { color: theme.muted }], children: t['form.phone'] }), _jsx(TextInput, { value: phone, onChangeText: setPhone, keyboardType: "phone-pad", autoComplete: "tel", textContentType: "telephoneNumber", style: field, accessibilityLabel: t['form.phone'] })] })) : null, departments.length > 1 ? (_jsxs(_Fragment, { children: [_jsx(Text, { style: [styles.label, { color: theme.muted }], children: t['live.department'] }), _jsx(View, { style: styles.chips, accessibilityRole: "radiogroup", children: departments.map((d) => {
+                            const on = d.id === departmentId;
+                            return (_jsx(Pressable, { onPress: () => setDepartmentId(d.id), accessibilityRole: "radio", accessibilityState: { checked: on }, style: [styles.chip, { borderColor: theme.accent }, on && { backgroundColor: theme.primary, borderColor: theme.primary }], children: _jsx(Text, { style: [styles.chipText, { color: on ? theme.onPrimary : theme.accent }], children: d.name }) }, d.id));
+                        }) })] })) : null, _jsx(Text, { style: [styles.label, { color: theme.muted }], children: t['live.message'] }), _jsx(TextInput, { value: message, onChangeText: setMessage, multiline: true, maxLength: LIVE_MESSAGE_MAX, style: [field, styles.message], accessibilityLabel: t['live.message'] }), error ? (_jsx(Text, { style: [styles.error, { color: theme.error }], accessibilityRole: "alert", accessibilityLiveRegion: "polite", children: error })) : null, _jsxs(View, { style: styles.actions, children: [_jsx(Pressable, { onPress: submit, disabled: sending, accessibilityRole: "button", accessibilityState: { disabled: sending, busy: sending }, style: [styles.btn, { backgroundColor: theme.primary }, sending && styles.disabled], children: _jsx(Text, { style: [styles.btnText, { color: theme.onPrimary }], children: sending ? t['live.connecting'] : t['live.start'] }) }), _jsx(Pressable, { onPress: () => controller.backToChat(), accessibilityRole: "button", style: [styles.btn, styles.btnGhost, { borderColor: theme.accent }], children: _jsx(Text, { style: [styles.btnText, { color: theme.accent }], children: t['form.cancel'] }) })] })] }));
+}
+const styles = StyleSheet.create({
+    flex: { flex: 1 },
+    status: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingHorizontal: 12, paddingVertical: 8, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#e5e7eb', backgroundColor: '#ffffff' },
+    statusText: { flex: 1, fontSize: 14, fontWeight: '600' },
+    small: { borderWidth: 1, borderRadius: 999, paddingHorizontal: 10, paddingVertical: 4 },
+    smallText: { fontSize: 13, fontWeight: '600' },
+    banner: { backgroundColor: '#fef3c7', paddingHorizontal: 12, paddingVertical: 6 },
+    bannerText: { color: '#92400e', fontSize: 13 },
+    list: { padding: 12, gap: 6 },
+    bubble: { maxWidth: '85%', borderRadius: 14, paddingHorizontal: 12, paddingVertical: 8 },
+    // המבקר בצד הסוף והנציג בצד ההתחלה, כמו בצ'אט עם הבוט. flex-start מתהפך לבד ב-RTL
+    theirs: { alignSelf: 'flex-start', borderWidth: StyleSheet.hairlineWidth, borderColor: '#e5e7eb' },
+    mine: { alignSelf: 'flex-end' },
+    sending: { opacity: 0.6 },
+    author: { fontSize: 12, fontWeight: '600', marginBottom: 2 },
+    body: { fontSize: 15, lineHeight: 21 },
+    meta: { fontSize: 12, marginTop: 2 },
+    system: { alignSelf: 'center', fontSize: 13, textAlign: 'center', paddingVertical: 4 },
+    typing: { alignSelf: 'flex-start', fontSize: 13, fontStyle: 'italic', paddingVertical: 2 },
+    leave: { alignSelf: 'center', marginTop: 8 },
+    final: { alignItems: 'center', paddingVertical: 12 },
+    error: { fontSize: 14, paddingHorizontal: 12, paddingVertical: 4 },
+    composer: { flexDirection: 'row', alignItems: 'center', gap: 8, padding: 8, borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: '#e5e7eb', backgroundColor: '#ffffff' },
+    input: { flex: 1, borderRadius: 20, backgroundColor: '#f3f4f6', paddingHorizontal: 14, paddingVertical: Platform.OS === 'ios' ? 10 : 6, fontSize: 15 },
+    send: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' },
+    sendIcon: { width: 0, height: 0, borderTopWidth: 8, borderBottomWidth: 8, borderStartWidth: 14, borderTopColor: 'transparent', borderBottomColor: 'transparent', marginStart: 4 },
+    disabled: { opacity: 0.5 },
+    btn: { borderRadius: 8, paddingHorizontal: 18, paddingVertical: 10, alignItems: 'center' },
+    btnGhost: { borderWidth: 1, backgroundColor: 'transparent' },
+    btnText: { fontSize: 15, fontWeight: '600' },
+    form: { padding: 16, gap: 6 },
+    formTitle: { fontSize: 18, fontWeight: '600', marginBottom: 6 },
+    note: { fontSize: 14, marginBottom: 4 },
+    label: { fontSize: 13, marginTop: 6 },
+    field: { borderWidth: 1, borderColor: '#d1d5db', borderRadius: 8, paddingHorizontal: 10, paddingVertical: Platform.OS === 'ios' ? 10 : 6, fontSize: 15, backgroundColor: '#ffffff' },
+    message: { minHeight: 90, textAlignVertical: 'top' },
+    chips: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 6 },
+    chip: { borderWidth: 1.5, borderRadius: 999, paddingHorizontal: 14, paddingVertical: 7, backgroundColor: '#ffffff' },
+    chipText: { fontSize: 14, fontWeight: '600' },
+    actions: { flexDirection: 'row', gap: 10, marginTop: 12 },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kavchat/react-native",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Kavchat for React Native: the scripted support chat as a provider, a chat screen and a floating launcher.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -19,7 +19,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@kavchat/core": "0.0.2"
+    "@kavchat/core": "0.0.3"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=1.17.0",