@kavchat/react-native 0.0.1 → 0.0.3

package/src/ui/LiveChatView.tsx

@@ -0,0 +1,308 @@
+import { useEffect, useRef, useState } from 'react';
+import type { ComponentRef } from 'react';
+import { Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';
+import { LIVE_MESSAGE_MAX, liveLines, liveStatus } from '@kavchat/core';
+import type { LiveLine, UiTexts } from '@kavchat/core';
+import type { LiveSnapshot } from '../live/session';
+import type { KavchatTheme } from '../theme';
+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<ComponentRef<typeof ScrollView>>(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: () => Promise<unknown>) => {
+    if (busy) return;
+    setBusy(true);
+    try {
+      await fn();
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <View style={styles.flex}>
+      <View style={styles.status}>
+        <Text style={[styles.statusText, { color: theme.text }]} accessibilityRole="header" accessibilityLiveRegion="polite">
+          {statusText(live, t, now)}
+        </Text>
+        {open ? (
+          <Pressable onPress={() => run(() => controller.liveEnd())} disabled={busy} accessibilityRole="button" hitSlop={8} style={[styles.small, { borderColor: theme.accent }]}>
+            <Text style={[styles.smallText, { color: theme.accent }]}>{t['live.end']}</Text>
+          </Pressable>
+        ) : null}
+      </View>
+      {live.connection === 'reconnecting' && open ? (
+        <View style={styles.banner} accessibilityRole="alert">
+          <Text style={styles.bannerText}>{t['live.reconnecting']}</Text>
+        </View>
+      ) : null}
+      <ScrollView
+        ref={scroll}
+        style={styles.flex}
+        contentContainerStyle={styles.list}
+        onContentSizeChange={() => scroll.current?.scrollToEnd({ animated: true })}
+        keyboardShouldPersistTaps="handled"
+      >
+        {liveLines(live.chat, t).map((line) => (
+          <Line key={line.key} line={line} theme={theme} t={t} onRetry={line.clientId ? () => controller.liveRetry(line.clientId!) : undefined} />
+        ))}
+        {live.agentTyping !== null && live.phase === 'active' ? (
+          <Text style={[styles.typing, { color: theme.muted }]} accessibilityLiveRegion="polite">
+            {t['live.typing']}
+          </Text>
+        ) : null}
+        {queued ? (
+          <Pressable
+            onPress={() => run(() => controller.liveLeaveMessage())}
+            disabled={busy}
+            accessibilityRole="button"
+            style={[styles.btn, styles.btnGhost, styles.leave, { borderColor: theme.accent }, busy && styles.disabled]}
+          >
+            <Text style={[styles.btnText, { color: theme.accent }]}>{t['live.leave']}</Text>
+          </Pressable>
+        ) : null}
+        {!open ? (
+          <View style={styles.final}>
+            <Pressable onPress={() => controller.closeLive()} accessibilityRole="button" style={[styles.btn, { backgroundColor: theme.primary }]}>
+              <Text style={[styles.btnText, { color: theme.onPrimary }]}>{t['live.back']}</Text>
+            </Pressable>
+          </View>
+        ) : null}
+      </ScrollView>
+      {error ? (
+        <Text style={[styles.error, { color: theme.error }]} accessibilityRole="alert">
+          {error}
+        </Text>
+      ) : null}
+      {open ? (
+        <View style={styles.composer}>
+          <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 }]}
+          />
+          <Pressable
+            onPress={send}
+            disabled={!text.trim()}
+            accessibilityRole="button"
+            accessibilityLabel={t['widget.send']}
+            style={[styles.send, { backgroundColor: theme.primary }, !text.trim() && styles.disabled]}
+          >
+            <View style={[styles.sendIcon, { borderStartColor: theme.onPrimary }]} />
+          </Pressable>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+/** שורת המצב של המכונה המשותפת, ושני מצבים שלא באים מהשרת: הוחלף במכשיר אחר, או פג */
+function statusText(live: LiveSnapshot, t: UiTexts, now: number): string {
+  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 }: { line: LiveLine; theme: KavchatTheme; t: UiTexts; onRetry?: () => void }) {
+  if (line.kind === 'system') return <Text style={[styles.system, { color: theme.muted }]}>{line.text}</Text>;
+  const mine = line.kind === 'visitor';
+  const failed = line.status === 'failed';
+  const bubble = (
+    <>
+      {!mine && line.name ? <Text style={[styles.author, { color: theme.muted }]}>{line.name}</Text> : null}
+      <Text style={[styles.body, { color: theme.text }]} selectable={!line.status}>
+        {line.text}
+      </Text>
+      {failed ? <Text style={[styles.meta, { color: theme.error }]}>{t['live.failed']}</Text> : 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 (
+      <Pressable onPress={onRetry} accessibilityRole="button" accessibilityHint={t['live.failed']} style={style}>
+        {bubble}
+      </Pressable>
+    );
+  }
+  return <View style={style}>{bubble}</View>;
+}
+
+/** טופס הבקשה לנציג: אורח משאיר שם ומייל או טלפון, בחירת מחלקה אם יש יותר מאחת, והודעה ראשונה (לא חובה) */
+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 (
+    <ScrollView style={styles.flex} contentContainerStyle={styles.form} keyboardShouldPersistTaps="handled">
+      <Text style={[styles.formTitle, { color: theme.text }]} accessibilityRole="header">
+        {t['live.talk']}
+      </Text>
+      {guest ? (
+        <>
+          <Text style={[styles.note, { color: theme.muted }]}>{t['live.intro']}</Text>
+          <Text style={[styles.label, { color: theme.muted }]}>{t['form.name']}</Text>
+          <TextInput value={name} onChangeText={setName} maxLength={100} autoComplete="name" textContentType="name" style={field} accessibilityLabel={t['form.name']} />
+          <Text style={[styles.label, { color: theme.muted }]}>{t['form.email']}</Text>
+          <TextInput
+            value={email}
+            onChangeText={setEmail}
+            keyboardType="email-address"
+            autoCapitalize="none"
+            autoComplete="email"
+            textContentType="emailAddress"
+            style={field}
+            accessibilityLabel={t['form.email']}
+          />
+          <Text style={[styles.label, { color: theme.muted }]}>{t['form.phone']}</Text>
+          <TextInput value={phone} onChangeText={setPhone} keyboardType="phone-pad" autoComplete="tel" textContentType="telephoneNumber" style={field} accessibilityLabel={t['form.phone']} />
+        </>
+      ) : null}
+      {departments.length > 1 ? (
+        <>
+          <Text style={[styles.label, { color: theme.muted }]}>{t['live.department']}</Text>
+          <View style={styles.chips} accessibilityRole="radiogroup">
+            {departments.map((d) => {
+              const on = d.id === departmentId;
+              return (
+                <Pressable
+                  key={d.id}
+                  onPress={() => setDepartmentId(d.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 }]}>{d.name}</Text>
+                </Pressable>
+              );
+            })}
+          </View>
+        </>
+      ) : null}
+      <Text style={[styles.label, { color: theme.muted }]}>{t['live.message']}</Text>
+      <TextInput value={message} onChangeText={setMessage} multiline maxLength={LIVE_MESSAGE_MAX} style={[field, styles.message]} accessibilityLabel={t['live.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['live.connecting'] : t['live.start']}</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>
+  );
+}
+
+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 },
+});