@kavchat/react-native 0.0.0-stage → 0.0.1

package/lib/storage.js

@@ -0,0 +1,70 @@
+export function memoryStorage() {
+    const values = new Map();
+    return {
+        getItem: (k) => values.get(k) ?? null,
+        setItem: (k, v) => {
+            values.set(k, v);
+        },
+        removeItem: (k) => {
+            values.delete(k);
+        },
+    };
+}
+export function defaultStorage() {
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const mod = require('@react-native-async-storage/async-storage');
+        const store = (mod && (mod.default ?? mod));
+        if (store && typeof store.getItem === 'function' && typeof store.setItem === 'function')
+            return store;
+    }
+    catch {
+        // לא מותקן
+    }
+    return memoryStorage();
+}
+export const releaseKey = (pk) => `kavchat:release:${pk}`;
+export const sessionKey = (pk) => `kavchat:session:${pk}`;
+export async function readJson(store, key) {
+    try {
+        const raw = await store.getItem(key);
+        return raw ? JSON.parse(raw) : null;
+    }
+    catch {
+        return null;
+    }
+}
+export async function writeJson(store, key, value) {
+    try {
+        await store.setItem(key, JSON.stringify(value));
+    }
+    catch {
+        // אין מקום או אין גישה. ממשיכים בלי
+    }
+}
+const ID_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_-';
+/** מזהה שיחה אקראי של 22 תווים מתוך [A-Za-z0-9_-], כפי שהשרת מצפה */
+export function randomId(length = 22, random = Math.random) {
+    const bytes = new Uint8Array(length);
+    const c = globalThis.crypto;
+    if (random === Math.random && c && typeof c.getRandomValues === 'function')
+        c.getRandomValues(bytes);
+    else
+        for (let i = 0; i < length; i++)
+            bytes[i] = Math.floor(random() * 256);
+    let out = '';
+    for (let i = 0; i < length; i++)
+        out += ID_CHARS[bytes[i] & 63];
+    return out;
+}
+/** טביעה קצרה של הטוקן (FNV-1a, כמו ב-Flutter), כדי לא לשמור את הטוקן בדיסק */
+export function userFingerprint(token) {
+    if (!token)
+        return '';
+    let h = 0x811c9dc5;
+    for (let i = 0; i < token.length; i++) {
+        h ^= token.charCodeAt(i);
+        h = Math.imul(h, 0x01000193) >>> 0;
+    }
+    return h.toString(16);
+}

package/lib/text.d.ts

@@ -0,0 +1,21 @@
+import type { UiTexts } from '@kavchat/core';
+import type { TicketInput } from './api';
+/** שפת הממשק: המבוקשת או שפת המכשיר אם יש לה תרגום, אחרת שפת הבוט */
+export declare function pickLocale(requested: string | undefined, deviceLocale: string | undefined, releaseLocale: string): string;
+/** שפת המכשיר בלי ספריות נוספות. Intl קיים ב-Hermes החדש. אם לא, חוזרים לשפת הבוט */
+export declare function deviceLocale(): string | undefined;
+/**
+ * מחזיר את הכתובת רק אם הפרוטוקול מותר
+ * לא משתמשים ב-URL כי ב-React Native המימוש שלו חלקי (protocol לא נתמך בגרסאות ישנות)
+ */
+export declare function safeUrl(raw: string, schemes: Array<'https' | 'tel'>): string | null;
+export type TextPart = {
+    text: string;
+    href?: string;
+};
+/** טקסט של הבוט מפוצל לקטעים. רק https הופך לקישור, וכל השאר נשאר טקסט */
+export declare function splitLinks(text: string): TextPart[];
+/** אותה בדיקה כמו בווידג'ט: הודעה חובה, ואורח חייב להשאיר מייל או טלפון */
+export declare function validateTicket(input: TicketInput, identified: boolean, t: UiTexts): string;
+/** שגיאה מהשרת: קודים מוכרים בשפת הממשק, אחרת ההודעה של השרת, אחרת הודעה כללית */
+export declare function ticketError(code: string, message: string, t: UiTexts): string;

package/lib/text.js

@@ -0,0 +1,86 @@
+import { UI_TEXTS } from '@kavchat/core';
+/**
+ * עזרי טקסט בלי תלות ב-React Native: שפה, קישורים, בדיקת טופס והודעות שגיאה
+ */
+const baseLocale = (l) => String(l || '').toLowerCase().split(/[-_]/)[0].replace(/^iw$/, 'he');
+/** שפת הממשק: המבוקשת או שפת המכשיר אם יש לה תרגום, אחרת שפת הבוט */
+export function pickLocale(requested, deviceLocale, releaseLocale) {
+    const wanted = baseLocale(requested || deviceLocale || '');
+    if (UI_TEXTS[wanted])
+        return wanted;
+    const fallback = baseLocale(releaseLocale);
+    return UI_TEXTS[fallback] ? fallback : 'en';
+}
+/** שפת המכשיר בלי ספריות נוספות. Intl קיים ב-Hermes החדש. אם לא, חוזרים לשפת הבוט */
+export function deviceLocale() {
+    try {
+        return Intl.DateTimeFormat().resolvedOptions().locale || undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+/**
+ * מחזיר את הכתובת רק אם הפרוטוקול מותר
+ * לא משתמשים ב-URL כי ב-React Native המימוש שלו חלקי (protocol לא נתמך בגרסאות ישנות)
+ */
+export function safeUrl(raw, schemes) {
+    const url = String(raw || '').trim();
+    if (!url || /\s/.test(url))
+        return null;
+    const m = /^([a-z][a-z0-9+.-]*):(.*)$/i.exec(url);
+    if (!m)
+        return null;
+    const scheme = m[1].toLowerCase();
+    if (!schemes.includes(scheme))
+        return null;
+    if (scheme === 'https' && !/^\/\/[^/?#\s]+/.test(m[2]))
+        return null;
+    if (scheme === 'tel' && !/^[0-9+*#(),;.\-]+$/.test(m[2]))
+        return null;
+    return `${scheme}:${m[2]}`;
+}
+const URL_RE = /https:\/\/[^\s<>"'`]+/g;
+const TRAILING = /[.,;:!?)\]}'"»]+$/;
+/** טקסט של הבוט מפוצל לקטעים. רק https הופך לקישור, וכל השאר נשאר טקסט */
+export function splitLinks(text) {
+    const parts = [];
+    let last = 0;
+    const re = new RegExp(URL_RE.source, 'g');
+    let m;
+    while ((m = re.exec(text))) {
+        const raw = m[0].replace(TRAILING, '');
+        const href = raw ? safeUrl(raw, ['https']) : null;
+        if (!href)
+            continue;
+        if (m.index > last)
+            parts.push({ text: text.slice(last, m.index) });
+        parts.push({ text: raw, href });
+        last = m.index + raw.length;
+        re.lastIndex = last;
+    }
+    if (last < text.length)
+        parts.push({ text: text.slice(last) });
+    return parts;
+}
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+/** אותה בדיקה כמו בווידג'ט: הודעה חובה, ואורח חייב להשאיר מייל או טלפון */
+export function validateTicket(input, identified, t) {
+    if (!input.message)
+        return t['form.required'];
+    if (!input.email && !input.phone && !identified)
+        return t['form.contactRequired'];
+    if (input.email && !EMAIL_RE.test(input.email))
+        return t['form.emailInvalid'];
+    return '';
+}
+/** שגיאה מהשרת: קודים מוכרים בשפת הממשק, אחרת ההודעה של השרת, אחרת הודעה כללית */
+export function ticketError(code, message, t) {
+    if (code === 'ticket_contact_required')
+        return t['form.contactRequired'];
+    if (code === 'email_invalid')
+        return t['form.emailInvalid'];
+    if (code === 'network')
+        return t['form.error'];
+    return message || t['form.error'];
+}

package/lib/theme.d.ts

@@ -0,0 +1,21 @@
+/**
+ * צבעים מתוך primaryColor של הלקוח, כמו בווידג'ט לאתר
+ * הטקסט על הצבע הראשי נבחר לפי יחס ניגודיות (WCAG), כדי שגם צבע בהיר יישאר קריא
+ */
+export declare const DEFAULT_PRIMARY = "#2563eb";
+export declare function parseHex(color: string): [number, number, number] | null;
+export declare function contrast(a: string, b: string): number;
+export interface KavchatTheme {
+    primary: string;
+    /** טקסט על רקע הצבע הראשי */
+    onPrimary: string;
+    /** טקסט וקווי מתאר בצבע הראשי על רקע לבן. צבע בהיר מדי מוחלף בכהה */
+    accent: string;
+    background: string;
+    botBubble: string;
+    userBubble: string;
+    text: string;
+    muted: string;
+    error: string;
+}
+export declare function themeFor(primaryColor: string | undefined, override?: Partial<KavchatTheme>): KavchatTheme;

package/lib/theme.js

@@ -0,0 +1,53 @@
+/**
+ * צבעים מתוך primaryColor של הלקוח, כמו בווידג'ט לאתר
+ * הטקסט על הצבע הראשי נבחר לפי יחס ניגודיות (WCAG), כדי שגם צבע בהיר יישאר קריא
+ */
+export const DEFAULT_PRIMARY = '#2563eb';
+const DARK = '#111827';
+const WHITE = '#ffffff';
+export function parseHex(color) {
+    const m = /^#([0-9a-f]{6})$/i.exec(String(color || '').trim());
+    if (!m)
+        return null;
+    const n = parseInt(m[1], 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+function luminance(rgb) {
+    const [r, g, b] = rgb.map((v) => {
+        const c = v / 255;
+        return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+export function contrast(a, b) {
+    const la = luminance(parseHex(a) ?? [0, 0, 0]);
+    const lb = luminance(parseHex(b) ?? [0, 0, 0]);
+    return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+export function themeFor(primaryColor, override) {
+    const color = override?.primary ?? primaryColor ?? '';
+    const primary = parseHex(color) ? color.toLowerCase() : DEFAULT_PRIMARY;
+    const onPrimary = contrast(primary, WHITE) >= contrast(primary, DARK) ? WHITE : DARK;
+    const accent = contrast(primary, WHITE) >= 3 ? primary : DARK;
+    return {
+        primary,
+        onPrimary,
+        accent,
+        background: '#f3f4f6',
+        botBubble: '#ffffff',
+        userBubble: '#e0e7ff',
+        text: DARK,
+        muted: '#6b7280',
+        error: '#b91c1c',
+        ...stripUndefined(override),
+    };
+}
+function stripUndefined(o) {
+    const out = {};
+    if (!o)
+        return out;
+    for (const [k, v] of Object.entries(o))
+        if (v !== undefined)
+            out[k] = v;
+    return out;
+}

package/lib/ui/KavchatChat.d.ts

@@ -0,0 +1,13 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+/**
+ * מסך הצ'אט. כיוון הפריסה נקבע לפי I18nManager של האפליקציה המארחת, ולא כופים RTL.
+ * טקסט עם textAlign ברירת מחדל מיושר לפי השפה שלו, כך שעברית וערבית נקראות נכון גם באפליקציה LTR
+ */
+export interface KavchatChatProps {
+    /** כפתור סגירה בכותרת. בלי זה אין כפתור */
+    onClose?: () => void;
+    /** בלי כותרת, כשהאפליקציה מציגה כותרת משלה בניווט */
+    hideHeader?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function KavchatChat({ onClose, hideHeader, style }: KavchatChatProps): import("react").JSX.Element;

package/lib/ui/KavchatChat.js

@@ -0,0 +1,150 @@
+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 { BRANDING_URL } from '../controller';
+import { safeUrl, splitLinks } from '../text';
+import { useKavchatContext } from './KavchatProvider';
+export function KavchatChat({ onClose, hideHeader, style }) {
+    const { controller, snapshot, theme } = useKavchatContext();
+    const t = snapshot.texts;
+    useEffect(() => {
+        controller.ensureConversation();
+    }, [controller, snapshot.status]);
+    if (snapshot.status === 'loading') {
+        return (_jsx(View, { style: [styles.center, { backgroundColor: theme.background }, style], accessibilityLabel: t['widget.loading'], children: _jsx(ActivityIndicator, { color: theme.accent }) }));
+    }
+    if (snapshot.status === 'unavailable' || !snapshot.release) {
+        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 : (
+            // בתוכנית החינמית הסמל חובה
+            _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'] }) }))] }));
+}
+function ChatView() {
+    const { controller, snapshot, theme } = useKavchatContext();
+    const t = snapshot.texts;
+    const [text, setText] = useState('');
+    const scroll = useRef(null);
+    const conv = snapshot.conversation;
+    const typing = snapshot.typing;
+    const send = () => {
+        if (typing)
+            return;
+        const value = text;
+        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 }) })] })] }));
+}
+const isFixed = (chip) => chip.kind === 'back' || chip.kind === 'home';
+function Bubble({ message, theme, aiLabel }) {
+    const bot = message.from === 'bot';
+    const img = bot && message.imageUrl ? safeUrl(message.imageUrl, ['https']) : null;
+    const ai = bot && message.ai === true;
+    return (_jsxs(View, { style: [styles.bubble, bot ? [styles.botBubble, { backgroundColor: theme.botBubble }] : [styles.userBubble, { backgroundColor: theme.userBubble }]], children: [img ? _jsx(Image, { source: { uri: img }, style: styles.image, resizeMode: "cover", accessibilityIgnoresInvertColors: true }) : null, ai ? (
+            // תווית קטנה: המשתמש צריך לדעת שהתשובה נוצרה ב-AI ולא נכתבה בתסריט
+            _jsx(Text, { style: [styles.aiLabel, { color: theme.muted, borderColor: theme.muted }], children: aiLabel })) : null, _jsx(Text, { style: [styles.body, { color: theme.text }], selectable: true, children: ai
+                    ? // תשובת AI היא טקסט פשוט בלבד, בלי קישורים ובלי עיבוד
+                        message.text
+                    : bot
+                        ? splitLinks(message.text).map((p, i) => p.href ? (_jsx(Text, { style: [styles.link, { color: theme.accent }], accessibilityRole: "link", onPress: () => Linking.openURL(p.href).catch(() => undefined), children: p.text }, i)) : (p.text))
+                        : // הודעות המשתמש לא הופכות לקישורים
+                            message.text })] }));
+}
+function ChipButton({ label, theme, fixed, onPress }) {
+    return (_jsx(Pressable, { onPress: onPress, accessibilityRole: "button", style: ({ pressed }) => [styles.chip, { borderColor: theme.accent }, fixed && styles.chipFixed, pressed && { backgroundColor: theme.userBubble }], children: _jsx(Text, { style: [styles.chipText, { color: theme.accent }, fixed && styles.chipTextFixed], children: label }) }));
+}
+function ContactForm() {
+    const { controller, snapshot, theme } = useKavchatContext();
+    const t = snapshot.texts;
+    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 [topicId, setTopicId] = useState(initialTopic);
+    const [message, setMessage] = useState(effect?.prefill ?? '');
+    const [error, setError] = useState('');
+    const [sending, setSending] = useState(false);
+    const submit = async () => {
+        if (sending)
+            return;
+        setSending(true);
+        setError('');
+        const problem = await controller.submitTicket({ name, email, phone, topicId, message });
+        setSending(false);
+        if (problem)
+            setError(problem);
+    };
+    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) => {
+                            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'] }) })] })] }));
+}
+function SentView() {
+    const { controller, snapshot, theme } = useKavchatContext();
+    const t = snapshot.texts;
+    return (_jsxs(View, { style: styles.center, children: [_jsx(Text, { style: [styles.body, styles.sent, { color: theme.text }], accessibilityLiveRegion: "polite", children: format(t['form.sent'], { number: snapshot.ticketNumber ?? '' }) }), _jsx(Pressable, { onPress: () => controller.backToChat(), accessibilityRole: "button", style: [styles.btn, { backgroundColor: theme.primary }], children: _jsx(Text, { style: [styles.btnText, { color: theme.onPrimary }], children: t['form.backToChat'] }) })] }));
+}
+function Label({ text, theme }) {
+    return _jsx(Text, { style: [styles.label, { color: theme.muted }], children: text });
+}
+function Avatar({ text, imageUrl, theme }) {
+    const img = imageUrl ? safeUrl(imageUrl, ['https']) : null;
+    return (_jsx(View, { style: [styles.avatar, { backgroundColor: theme.onPrimary }], importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: img ? _jsx(Image, { source: { uri: img }, style: styles.avatarImage }) : _jsx(Text, { style: [styles.avatarText, { color: theme.primary }], children: text.slice(0, 2) }) }));
+}
+/** אייקון שליחה בלי react-native-svg: משולש מגבולות. בכיוון RTL הוא מתהפך יחד עם הפריסה */
+function SendIcon({ color }) {
+    return _jsx(View, { style: [styles.sendIcon, { borderStartColor: color }] });
+}
+const styles = StyleSheet.create({
+    flex: { flex: 1 },
+    center: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24, gap: 16 },
+    header: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 12, paddingVertical: 10, gap: 10 },
+    titles: { flex: 1 },
+    title: { fontSize: 16, fontWeight: '600' },
+    subtitle: { fontSize: 12, opacity: 0.85 },
+    close: { padding: 4 },
+    closeText: { fontSize: 26, lineHeight: 28 },
+    avatar: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },
+    avatarImage: { width: 36, height: 36 },
+    avatarText: { fontSize: 13, fontWeight: '700' },
+    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
+    botBubble: { alignSelf: 'flex-start', borderWidth: StyleSheet.hairlineWidth, borderColor: '#e5e7eb' },
+    userBubble: { alignSelf: 'flex-end' },
+    body: { fontSize: 15, lineHeight: 21 },
+    link: { textDecorationLine: 'underline' },
+    aiLabel: { alignSelf: 'flex-start', fontSize: 11, fontWeight: '600', borderWidth: StyleSheet.hairlineWidth, borderRadius: 999, paddingHorizontal: 6, paddingVertical: 1, marginBottom: 4 },
+    image: { width: 220, height: 140, borderRadius: 8, marginBottom: 6 },
+    chips: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 6 },
+    chip: { borderWidth: 1.5, borderRadius: 999, paddingHorizontal: 14, paddingVertical: 7, backgroundColor: '#ffffff' },
+    chipFixed: { borderStyle: 'dashed' },
+    chipText: { fontSize: 14, fontWeight: '600' },
+    chipTextFixed: { fontWeight: '400' },
+    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 },
+    form: { padding: 16, gap: 6 },
+    formTitle: { fontSize: 18, fontWeight: '600', marginBottom: 6 },
+    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: 110, textAlignVertical: 'top' },
+    error: { fontSize: 14, marginTop: 6 },
+    actions: { flexDirection: 'row', gap: 10, marginTop: 12 },
+    btn: { borderRadius: 8, paddingHorizontal: 18, paddingVertical: 10, alignItems: 'center' },
+    btnGhost: { borderWidth: 1, backgroundColor: 'transparent' },
+    btnText: { fontSize: 15, fontWeight: '600' },
+    sent: { textAlign: 'center' },
+    badge: { alignItems: 'center', paddingVertical: 6, backgroundColor: '#ffffff' },
+    badgeText: { fontSize: 11 },
+});

package/lib/ui/KavchatLauncher.d.ts

@@ -0,0 +1,12 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+/**
+ * כפתור צף שפותח את הצ'אט בחלון מלא
+ * הכפתור לא מוצג כשהבוט לא זמין (כבוי, testers, מכסה), כמו בווידג'ט לאתר
+ */
+export interface KavchatLauncherProps {
+    /** מיקום הכפתור. ברירת מחדל: פינה תחתונה בצד הסוף. end מתהפך לבד ב-RTL */
+    style?: StyleProp<ViewStyle>;
+    /** בלי החלון המובנה, למשל כשהאפליקציה פותחת את KavchatChat במסך ניווט משלה */
+    onPress?: () => void;
+}
+export declare function KavchatLauncher({ style, onPress }: KavchatLauncherProps): import("react").JSX.Element | null;

package/lib/ui/KavchatLauncher.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, Pressable, SafeAreaView, StyleSheet, View } from 'react-native';
+import { KavchatChat } from './KavchatChat';
+import { useKavchatContext } from './KavchatProvider';
+export function KavchatLauncher({ style, onPress }) {
+    const { snapshot, theme, isOpen, open, close } = useKavchatContext();
+    if (snapshot.status !== 'ready')
+        return null;
+    const t = snapshot.texts;
+    return (_jsxs(_Fragment, { children: [_jsx(Pressable, { onPress: onPress ?? open, accessibilityRole: "button", accessibilityLabel: t['widget.open'], style: ({ pressed }) => [styles.fab, { backgroundColor: theme.primary }, pressed && styles.pressed, style], children: _jsx(ChatIcon, { color: theme.onPrimary }) }), onPress ? null : (_jsx(Modal, { visible: isOpen, animationType: "slide", presentationStyle: "pageSheet", onRequestClose: close, children: _jsx(SafeAreaView, { style: [styles.flex, { backgroundColor: theme.primary }], children: _jsx(KavchatChat, { onClose: close }) }) }))] }));
+}
+/** בועת צ'אט מ-View בלבד, כדי לא לחייב את האפליקציה בספריית אייקונים */
+function ChatIcon({ color }) {
+    return (_jsxs(View, { style: styles.icon, children: [_jsx(View, { style: [styles.iconBody, { backgroundColor: color }] }), _jsx(View, { style: [styles.iconTail, { borderTopColor: color }] })] }));
+}
+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/lib/ui/KavchatProvider.d.ts

@@ -0,0 +1,62 @@
+import React from 'react';
+import type { FetchLike } from '../api';
+import { KavchatController, KavchatEvent, KavchatSnapshot } from '../controller';
+import type { KavchatScreen } from '../screens';
+import { StorageAdapter } from '../storage';
+import { KavchatTheme } 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;
+}
+export declare function KavchatProvider(props: KavchatProviderProps): React.JSX.Element;
+export declare function useKavchatContext(): KavchatContextValue;
+/** ה-hook הציבורי: מצב הפתיחה, זמינות הבוט והחלפת משתמש */
+export declare function useKavchat(): {
+    status: import("..").KavchatStatus;
+    /** false כשהבוט כבוי, מוגבל למשתמשי בדיקה או שנגמרה המכסה. אז לא מציגים כניסה לצ'אט */
+    available: boolean;
+    offline: boolean;
+    locale: string;
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    setUser: (user: {
+        token?: string | null;
+        name?: string | null;
+    } | null) => Promise<void>;
+    startNewConversation: () => void;
+    openContactForm: (prefill?: string) => void;
+    controller: KavchatController;
+};