@kavchat/react-native 0.0.0-stage → 0.0.1

package/src/storage.ts

@@ -0,0 +1,105 @@
+import type { BotState } from '@kavchat/core';
+import type { AnyRelease } from './api';
+
+/**
+ * אחסון במכשיר דרך מתאם, כדי שאפליקציה בלי AsyncStorage עדיין תעבוד (רק בלי מטמון בין הפעלות)
+ * המפתחות זהים ל-Flutter, כדי שההתנהגות תהיה אחידה בכל ה-SDK
+ */
+
+export interface StorageAdapter {
+  getItem(key: string): Promise<string | null> | string | null;
+  setItem(key: string, value: string): Promise<void> | void;
+  removeItem?(key: string): Promise<void> | void;
+}
+
+export function memoryStorage(): StorageAdapter {
+  const values = new Map<string, string>();
+  return {
+    getItem: (k) => values.get(k) ?? null,
+    setItem: (k, v) => {
+      values.set(k, v);
+    },
+    removeItem: (k) => {
+      values.delete(k);
+    },
+  };
+}
+
+/**
+ * AsyncStorage אם הוא מותקן, אחרת אחסון בזיכרון
+ * ה-require עטוף ב-try כדי ש-Metro יתייחס אליו כתלות אופציונלית
+ */
+// Metro מספק require בזמן ריצה. ההצהרה כאן חוסכת תלות ב-@types/node רק בשביל שורה אחת
+declare const require: (id: string) => unknown;
+
+export function defaultStorage(): StorageAdapter {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const mod = require('@react-native-async-storage/async-storage') as { default?: unknown } | undefined;
+    const store = (mod && (mod.default ?? mod)) as StorageAdapter | undefined;
+    if (store && typeof store.getItem === 'function' && typeof store.setItem === 'function') return store;
+  } catch {
+    // לא מותקן
+  }
+  return memoryStorage();
+}
+
+export const releaseKey = (pk: string) => `kavchat:release:${pk}`;
+export const sessionKey = (pk: string) => `kavchat:session:${pk}`;
+
+export async function readJson<T>(store: StorageAdapter, key: string): Promise<T | null> {
+  try {
+    const raw = await store.getItem(key);
+    return raw ? (JSON.parse(raw) as T) : null;
+  } catch {
+    return null;
+  }
+}
+
+export async function writeJson(store: StorageAdapter, key: string, value: unknown): Promise<void> {
+  try {
+    await store.setItem(key, JSON.stringify(value));
+  } catch {
+    // אין מקום או אין גישה. ממשיכים בלי
+  }
+}
+
+export interface CachedRelease {
+  etag: string;
+  release: AnyRelease;
+}
+
+/** השיחה השמורה. בלי התסריטים עצמם, הם מגיעים מהגרסה השמורה */
+export interface StoredSession {
+  id: string;
+  startedAt: string;
+  version: number;
+  /** טביעה של המשתמש, לא הטוקן עצמו, כדי לא להציג שיחה של משתמש אחר אחרי החלפת חשבון */
+  user: string;
+  savedAt?: number;
+  state: Omit<BotState, 'scripts'> | null;
+}
+
+const ID_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_-';
+
+/** מזהה שיחה אקראי של 22 תווים מתוך [A-Za-z0-9_-], כפי שהשרת מצפה */
+export function randomId(length = 22, random: () => number = Math.random): string {
+  const bytes = new Uint8Array(length);
+  const c = (globalThis as { crypto?: { getRandomValues?: (a: Uint8Array) => Uint8Array } }).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: string | null | undefined): string {
+  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/src/text.ts

@@ -0,0 +1,84 @@
+import { UI_TEXTS } from '@kavchat/core';
+import type { UiTexts } from '@kavchat/core';
+import type { TicketInput } from './api';
+
+/**
+ * עזרי טקסט בלי תלות ב-React Native: שפה, קישורים, בדיקת טופס והודעות שגיאה
+ */
+
+const baseLocale = (l: string) => String(l || '').toLowerCase().split(/[-_]/)[0].replace(/^iw$/, 'he');
+
+/** שפת הממשק: המבוקשת או שפת המכשיר אם יש לה תרגום, אחרת שפת הבוט */
+export function pickLocale(requested: string | undefined, deviceLocale: string | undefined, releaseLocale: string): string {
+  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(): string | undefined {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().locale || undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * מחזיר את הכתובת רק אם הפרוטוקול מותר
+ * לא משתמשים ב-URL כי ב-React Native המימוש שלו חלקי (protocol לא נתמך בגרסאות ישנות)
+ */
+export function safeUrl(raw: string, schemes: Array<'https' | 'tel'>): string | null {
+  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() as 'https' | 'tel';
+  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]}`;
+}
+
+export type TextPart = { text: string; href?: string };
+
+const URL_RE = /https:\/\/[^\s<>"'`]+/g;
+const TRAILING = /[.,;:!?)\]}'"»]+$/;
+
+/** טקסט של הבוט מפוצל לקטעים. רק https הופך לקישור, וכל השאר נשאר טקסט */
+export function splitLinks(text: string): TextPart[] {
+  const parts: TextPart[] = [];
+  let last = 0;
+  const re = new RegExp(URL_RE.source, 'g');
+  let m: RegExpExecArray | null;
+  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: TicketInput, identified: boolean, t: UiTexts): string {
+  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: string, message: string, t: UiTexts): string {
+  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/src/theme.ts

@@ -0,0 +1,69 @@
+/**
+ * צבעים מתוך primaryColor של הלקוח, כמו בווידג'ט לאתר
+ * הטקסט על הצבע הראשי נבחר לפי יחס ניגודיות (WCAG), כדי שגם צבע בהיר יישאר קריא
+ */
+
+export const DEFAULT_PRIMARY = '#2563eb';
+const DARK = '#111827';
+const WHITE = '#ffffff';
+
+export function parseHex(color: string): [number, number, number] | null {
+  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: [number, number, number]): number {
+  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: string, b: string): number {
+  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 interface KavchatTheme {
+  primary: string;
+  /** טקסט על רקע הצבע הראשי */
+  onPrimary: string;
+  /** טקסט וקווי מתאר בצבע הראשי על רקע לבן. צבע בהיר מדי מוחלף בכהה */
+  accent: string;
+  background: string;
+  botBubble: string;
+  userBubble: string;
+  text: string;
+  muted: string;
+  error: string;
+}
+
+export function themeFor(primaryColor: string | undefined, override?: Partial<KavchatTheme>): KavchatTheme {
+  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<T extends object>(o: T | undefined): Partial<T> {
+  const out: Partial<T> = {};
+  if (!o) return out;
+  for (const [k, v] of Object.entries(o)) if (v !== undefined) (out as Record<string, unknown>)[k] = v;
+  return out;
+}

package/src/ui/KavchatChat.tsx

@@ -0,0 +1,383 @@
+import { useEffect, useRef, useState } from 'react';
+import type { ComponentRef } from 'react';
+import {
+  ActivityIndicator,
+  Image,
+  KeyboardAvoidingView,
+  Linking,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { format } 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';
+
+/**
+ * מסך הצ'אט. כיוון הפריסה נקבע לפי I18nManager של האפליקציה המארחת, ולא כופים RTL.
+ * טקסט עם textAlign ברירת מחדל מיושר לפי השפה שלו, כך שעברית וערבית נקראות נכון גם באפליקציה LTR
+ */
+
+export interface KavchatChatProps {
+  /** כפתור סגירה בכותרת. בלי זה אין כפתור */
+  onClose?: () => void;
+  /** בלי כותרת, כשהאפליקציה מציגה כותרת משלה בניווט */
+  hideHeader?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function KavchatChat({ onClose, hideHeader, style }: KavchatChatProps) {
+  const { controller, snapshot, theme } = useKavchatContext();
+  const t = snapshot.texts;
+
+  useEffect(() => {
+    controller.ensureConversation();
+  }, [controller, snapshot.status]);
+
+  if (snapshot.status === 'loading') {
+    return (
+      <View style={[styles.center, { backgroundColor: theme.background }, style]} accessibilityLabel={t['widget.loading']}>
+        <ActivityIndicator color={theme.accent} />
+      </View>
+    );
+  }
+  if (snapshot.status === 'unavailable' || !snapshot.release) {
+    return (
+      <View style={[styles.center, { backgroundColor: theme.background }, style]}>
+        <Text style={[styles.body, { color: theme.text }]}>{t['widget.unavailable']}</Text>
+        {onClose ? <ChipButton label={t['widget.close']} theme={theme} onPress={onClose} /> : null}
+      </View>
+    );
+  }
+
+  const s = snapshot.release.settings;
+  return (
+    <KeyboardAvoidingView style={[styles.flex, { backgroundColor: theme.background }, style]} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+      {hideHeader ? null : (
+        <View style={[styles.header, { backgroundColor: theme.primary }]}>
+          <Avatar text={s.avatarText || s.botName || ''} imageUrl={s.avatarImageUrl} theme={theme} />
+          <View style={styles.titles}>
+            <Text style={[styles.title, { color: theme.onPrimary }]} numberOfLines={1} accessibilityRole="header">
+              {s.botName}
+            </Text>
+            {s.subtitle ? (
+              <Text style={[styles.subtitle, { color: theme.onPrimary }]} numberOfLines={1}>
+                {s.subtitle}
+              </Text>
+            ) : null}
+          </View>
+          {onClose ? (
+            <Pressable onPress={onClose} hitSlop={12} accessibilityRole="button" accessibilityLabel={t['widget.close']} style={styles.close}>
+              <Text style={[styles.closeText, { color: theme.onPrimary }]}>{'×'}</Text>
+            </Pressable>
+          ) : null}
+        </View>
+      )}
+      {snapshot.offline ? (
+        <View style={styles.banner} accessibilityRole="alert">
+          <Text style={styles.bannerText}>{t['widget.offline']}</Text>
+        </View>
+      ) : null}
+      {snapshot.view === 'chat' ? <ChatView /> : snapshot.view === 'form' ? <ContactForm /> : <SentView />}
+      {s.removeBranding ? null : (
+        // בתוכנית החינמית הסמל חובה
+        <Pressable onPress={() => Linking.openURL(BRANDING_URL).catch(() => undefined)} accessibilityRole="link" style={styles.badge}>
+          <Text style={[styles.badgeText, { color: theme.muted }]}>{t['widget.poweredBy']}</Text>
+        </Pressable>
+      )}
+    </KeyboardAvoidingView>
+  );
+}
+
+function ChatView() {
+  const { controller, snapshot, theme } = useKavchatContext();
+  const t = snapshot.texts;
+  const [text, setText] = useState('');
+  const scroll = useRef<ComponentRef<typeof ScrollView>>(null);
+  const conv = snapshot.conversation;
+
+  const typing = snapshot.typing;
+  const send = () => {
+    if (typing) return;
+    const value = text;
+    setText('');
+    void controller.sendText(value);
+  };
+
+  return (
+    <View style={styles.flex}>
+      <ScrollView
+        ref={scroll}
+        style={styles.flex}
+        contentContainerStyle={styles.list}
+        onContentSizeChange={() => scroll.current?.scrollToEnd({ animated: true })}
+        keyboardShouldPersistTaps="handled"
+      >
+        {(conv?.messages ?? []).map((m) => (
+          <Bubble key={m.id} message={m} theme={theme} aiLabel={t['chat.aiLabel']} />
+        ))}
+        {typing ? (
+          <View style={[styles.bubble, styles.botBubble, { backgroundColor: theme.botBubble }]} accessibilityLabel={t['widget.loading']} accessibilityLiveRegion="polite">
+            <ActivityIndicator size="small" color={theme.accent} />
+          </View>
+        ) : null}
+        {conv && conv.chips.length > 0 ? (
+          <View style={styles.chips} accessibilityRole="menu">
+            {conv.chips.map((chip) => (
+              <ChipButton key={chip.id} label={chip.label} theme={theme} fixed={isFixed(chip)} onPress={() => controller.pressChip(chip)} />
+            ))}
+          </View>
+        ) : null}
+      </ScrollView>
+      <View style={styles.composer}>
+        <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 }]}
+        />
+        <Pressable
+          onPress={send}
+          disabled={!text.trim() || typing}
+          accessibilityRole="button"
+          accessibilityLabel={t['widget.send']}
+          style={[styles.send, { backgroundColor: theme.primary }, (!text.trim() || typing) && styles.disabled]}
+        >
+          <SendIcon color={theme.onPrimary} />
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+const isFixed = (chip: BotChip) => chip.kind === 'back' || chip.kind === 'home';
+
+function Bubble({ message, theme, aiLabel }: { message: BotMessage; theme: KavchatTheme; aiLabel: string }) {
+  const bot = message.from === 'bot';
+  const img = bot && message.imageUrl ? safeUrl(message.imageUrl, ['https']) : null;
+  const ai = bot && message.ai === true;
+  return (
+    <View style={[styles.bubble, bot ? [styles.botBubble, { backgroundColor: theme.botBubble }] : [styles.userBubble, { backgroundColor: theme.userBubble }]]}>
+      {img ? <Image source={{ uri: img }} style={styles.image} resizeMode="cover" accessibilityIgnoresInvertColors /> : null}
+      {ai ? (
+        // תווית קטנה: המשתמש צריך לדעת שהתשובה נוצרה ב-AI ולא נכתבה בתסריט
+        <Text style={[styles.aiLabel, { color: theme.muted, borderColor: theme.muted }]}>{aiLabel}</Text>
+      ) : null}
+      <Text style={[styles.body, { color: theme.text }]} selectable>
+        {ai
+          ? // תשובת AI היא טקסט פשוט בלבד, בלי קישורים ובלי עיבוד
+            message.text
+          : bot
+          ? splitLinks(message.text).map((p, i) =>
+              p.href ? (
+                <Text key={i} style={[styles.link, { color: theme.accent }]} accessibilityRole="link" onPress={() => Linking.openURL(p.href!).catch(() => undefined)}>
+                  {p.text}
+                </Text>
+              ) : (
+                p.text
+              ),
+            )
+          : // הודעות המשתמש לא הופכות לקישורים
+            message.text}
+      </Text>
+    </View>
+  );
+}
+
+function ChipButton({ label, theme, fixed, onPress }: { label: string; theme: KavchatTheme; fixed?: boolean; onPress: () => void }) {
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      style={({ pressed }) => [styles.chip, { borderColor: theme.accent }, fixed && styles.chipFixed, pressed && { backgroundColor: theme.userBubble }]}
+    >
+      <Text style={[styles.chipText, { color: theme.accent }, fixed && styles.chipTextFixed]}>{label}</Text>
+    </Pressable>
+  );
+}
+
+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 (
+    <ScrollView style={styles.flex} contentContainerStyle={styles.form} keyboardShouldPersistTaps="handled">
+      <Text style={[styles.formTitle, { color: theme.text }]} accessibilityRole="header">
+        {t['form.title']}
+      </Text>
+      <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} />
+      <TextInput
+        value={email}
+        onChangeText={setEmail}
+        keyboardType="email-address"
+        autoCapitalize="none"
+        autoComplete="email"
+        textContentType="emailAddress"
+        style={inputStyle}
+        accessibilityLabel={t['form.email']}
+      />
+      <Label text={t['form.phone']} theme={theme} />
+      <TextInput value={phone} onChangeText={setPhone} keyboardType="phone-pad" autoComplete="tel" textContentType="telephoneNumber" style={inputStyle} accessibilityLabel={t['form.phone']} />
+      {topics.length > 0 ? (
+        <>
+          <Label text={t['form.topic']} theme={theme} />
+          {/* אין select מובנה ב-React Native, ולכן הנושאים מוצגים ככפתורי בחירה */}
+          <View style={styles.chips} accessibilityRole="radiogroup">
+            {topics.map((tp) => {
+              const on = tp.id === topicId;
+              return (
+                <Pressable
+                  key={tp.id}
+                  onPress={() => setTopicId(on ? '' : tp.id)}
+                  accessibilityRole="radio"
+                  accessibilityState={{ checked: on }}
+                  style={[styles.chip, { borderColor: theme.accent }, on && { backgroundColor: theme.primary, borderColor: theme.primary }]}
+                >
+                  <Text style={[styles.chipText, { color: on ? theme.onPrimary : theme.accent }]}>{tp.name}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        </>
+      ) : null}
+      <Label text={t['form.message']} theme={theme} />
+      <TextInput value={message} onChangeText={setMessage} multiline maxLength={2000} style={[inputStyle, styles.message]} accessibilityLabel={t['form.message']} />
+      {error ? (
+        <Text style={[styles.error, { color: theme.error }]} accessibilityRole="alert" accessibilityLiveRegion="polite">
+          {error}
+        </Text>
+      ) : null}
+      <View style={styles.actions}>
+        <Pressable
+          onPress={submit}
+          disabled={sending}
+          accessibilityRole="button"
+          accessibilityState={{ disabled: sending, busy: sending }}
+          style={[styles.btn, { backgroundColor: theme.primary }, sending && styles.disabled]}
+        >
+          <Text style={[styles.btnText, { color: theme.onPrimary }]}>{sending ? t['form.sending'] : t['form.submit']}</Text>
+        </Pressable>
+        <Pressable onPress={() => controller.backToChat()} accessibilityRole="button" style={[styles.btn, styles.btnGhost, { borderColor: theme.accent }]}>
+          <Text style={[styles.btnText, { color: theme.accent }]}>{t['form.cancel']}</Text>
+        </Pressable>
+      </View>
+    </ScrollView>
+  );
+}
+
+function SentView() {
+  const { controller, snapshot, theme } = useKavchatContext();
+  const t = snapshot.texts;
+  return (
+    <View style={styles.center}>
+      <Text style={[styles.body, styles.sent, { color: theme.text }]} accessibilityLiveRegion="polite">
+        {format(t['form.sent'], { number: snapshot.ticketNumber ?? '' })}
+      </Text>
+      <Pressable onPress={() => controller.backToChat()} accessibilityRole="button" style={[styles.btn, { backgroundColor: theme.primary }]}>
+        <Text style={[styles.btnText, { color: theme.onPrimary }]}>{t['form.backToChat']}</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+function Label({ text, theme }: { text: string; theme: KavchatTheme }) {
+  return <Text style={[styles.label, { color: theme.muted }]}>{text}</Text>;
+}
+
+function Avatar({ text, imageUrl, theme }: { text: string; imageUrl: string | null; theme: KavchatTheme }) {
+  const img = imageUrl ? safeUrl(imageUrl, ['https']) : null;
+  return (
+    <View style={[styles.avatar, { backgroundColor: theme.onPrimary }]} importantForAccessibility="no-hide-descendants" accessibilityElementsHidden>
+      {img ? <Image source={{ uri: img }} style={styles.avatarImage} /> : <Text style={[styles.avatarText, { color: theme.primary }]}>{text.slice(0, 2)}</Text>}
+    </View>
+  );
+}
+
+/** אייקון שליחה בלי react-native-svg: משולש מגבולות. בכיוון RTL הוא מתהפך יחד עם הפריסה */
+function SendIcon({ color }: { color: string }) {
+  return <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 },
+});