turbodesk-livechat-react-native 0.1.0-alpha.0

package/src/ui/components/LivechatMessageRenderer.tsx

@@ -0,0 +1,268 @@
+import React from "react";
+import {
+  Image,
+  Linking,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+export type InteractiveReplyPayload = {
+  type: "button_reply" | "list_reply";
+  id: string;
+  title: string;
+  messageId: string;
+};
+
+export type ShowListPickerFn = (
+  sections: any[],
+  onSelect: (id: string, title: string) => void
+) => void;
+
+// ── text ──────────────────────────────────────────────────────────────────────
+
+function TextRenderer({ body, textColor, fontSize }: { body: string; textColor: string; fontSize: number }) {
+  return (
+    <Text style={[styles.text, { color: textColor, fontSize }]}>{body}</Text>
+  );
+}
+
+// ── image ─────────────────────────────────────────────────────────────────────
+
+function ImageRenderer({ url, caption, textColor }: { url: string; caption?: string; textColor: string }) {
+  return (
+    <TouchableOpacity onPress={() => Linking.openURL(url)} activeOpacity={0.85} style={styles.mediaPad}>
+      <Image source={{ uri: url }} style={styles.mediaImage} resizeMode="contain" />
+      {caption ? <Text style={[styles.caption, { color: textColor }]}>{caption}</Text> : null}
+    </TouchableOpacity>
+  );
+}
+
+// ── video ─────────────────────────────────────────────────────────────────────
+
+function VideoRenderer({ url, caption, textColor }: { url: string; caption?: string; textColor: string }) {
+  return (
+    <TouchableOpacity onPress={() => Linking.openURL(url)} activeOpacity={0.85} style={[styles.mediaPad, styles.videoBox]}>
+      <View style={styles.playOverlay}>
+        <Text style={styles.playIcon}>▶</Text>
+      </View>
+      {caption ? <Text style={[styles.caption, { color: textColor }]}>{caption}</Text> : null}
+    </TouchableOpacity>
+  );
+}
+
+// ── audio ─────────────────────────────────────────────────────────────────────
+
+function AudioRenderer({ url }: { url: string }) {
+  return (
+    <TouchableOpacity onPress={() => Linking.openURL(url)} activeOpacity={0.85} style={styles.audioRow}>
+      <Text style={styles.audioIcon}>🎵</Text>
+      <Text style={styles.audioLabel}>Audio message</Text>
+    </TouchableOpacity>
+  );
+}
+
+// ── document ──────────────────────────────────────────────────────────────────
+
+function DocumentRenderer({ url, filename, textColor }: { url: string; filename: string; textColor: string }) {
+  return (
+    <TouchableOpacity onPress={() => Linking.openURL(url)} activeOpacity={0.85} style={styles.docRow}>
+      <Text style={styles.docIcon}>📄</Text>
+      <Text style={[styles.docName, { color: textColor }]} numberOfLines={1}>{filename}</Text>
+      <Text style={[styles.docDownload, { color: textColor }]}>↓</Text>
+    </TouchableOpacity>
+  );
+}
+
+// ── interactive ───────────────────────────────────────────────────────────────
+
+function InteractiveRenderer({
+  message,
+  textColor,
+  fontSize,
+  onReply,
+  onShowListPicker,
+  disabled,
+}: {
+  message: any;
+  textColor: string;
+  fontSize: number;
+  onReply?: (payload: InteractiveReplyPayload) => void;
+  onShowListPicker?: ShowListPickerFn;
+  disabled?: boolean;
+}) {
+  const interactive = message?.livechat?.interactive;
+  if (!interactive) return null;
+  const { type } = interactive;
+  const messageId: string = message?._id ?? "";
+
+  // contact replies — display only
+  if (type === "button_reply") {
+    return <Text style={[styles.text, { color: textColor, fontSize }]}>{interactive.button_reply?.title}</Text>;
+  }
+  if (type === "list_reply") {
+    return <Text style={[styles.text, { color: textColor, fontSize }]}>{interactive.list_reply?.title}</Text>;
+  }
+  if (type === "nfm_reply") {
+    let parsed: Record<string, any> | null = null;
+    try { parsed = JSON.parse(interactive.nfm_reply?.response_json ?? ""); } catch { /* ignore */ }
+    const entries = parsed ? Object.entries(parsed).filter(([k]) => k !== "flow_token") : [];
+    return (
+      <View style={styles.pad}>
+        {entries.length === 0
+          ? <Text style={[styles.text, { color: textColor, fontSize }]}>Form submitted.</Text>
+          : entries.map(([k, v]) => (
+            <Text key={k} style={[styles.text, { color: textColor, fontSize }]}>
+              <Text style={{ fontWeight: "600" }}>{k.replace(/^screen_\d+_/, "").replace(/_/g, " ")}: </Text>
+              {String(v).replace(/^\d+_/, "").replace(/_-_/g, " - ").replace(/_/g, " ")}
+            </Text>
+          ))
+        }
+      </View>
+    );
+  }
+
+  // agent-sent interactive
+  const bodyText = interactive.body?.text ?? null;
+  const footerText = interactive.footer?.text ?? null;
+  const headerText = interactive.header?.type === "text" ? interactive.header.text : null;
+
+  if (type === "cta_url") {
+    const url = interactive.action?.parameters?.url;
+    const label = interactive.action?.parameters?.display_text;
+    return (
+      <View>
+        {headerText ? <Text style={[styles.iHeader, { color: textColor }]}>{headerText}</Text> : null}
+        {bodyText ? <Text style={[styles.text, { color: textColor, fontSize }]}>{bodyText}</Text> : null}
+        {footerText ? <Text style={[styles.iFooter, { color: textColor }]}>{footerText}</Text> : null}
+        <View style={[styles.divider, { borderTopColor: textColor + "22" }]} />
+        <TouchableOpacity onPress={() => url && Linking.openURL(url)} style={styles.iActionBtn} disabled={!url}>
+          <Text style={[styles.iActionText, { color: textColor, fontSize }]}>🔗 {label ?? url}</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  if (type === "list") {
+    const sections: any[] = interactive.action?.sections ?? [];
+    const btnLabel = interactive.action?.button;
+    return (
+      <View>
+        {headerText ? <Text style={[styles.iHeader, { color: textColor }]}>{headerText}</Text> : null}
+        {bodyText ? <Text style={[styles.text, { color: textColor, fontSize }]}>{bodyText}</Text> : null}
+        {footerText ? <Text style={[styles.iFooter, { color: textColor }]}>{footerText}</Text> : null}
+        <View style={[styles.divider, { borderTopColor: textColor + "22" }]} />
+        <TouchableOpacity
+          style={styles.iActionBtn}
+          disabled={disabled || !onReply}
+          onPress={() => onShowListPicker && onReply && onShowListPicker(sections, (id, title) => onReply({ type: "list_reply", id, title, messageId }))}
+        >
+          <Text style={[styles.iActionText, { color: textColor, fontSize }]}>☰ {btnLabel}</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  if (type === "button") {
+    const buttons: any[] = interactive.action?.buttons ?? [];
+    return (
+      <View>
+        {headerText ? <Text style={[styles.iHeader, { color: textColor }]}>{headerText}</Text> : null}
+        {bodyText ? <Text style={[styles.text, { color: textColor, fontSize }]}>{bodyText}</Text> : null}
+        {footerText ? <Text style={[styles.iFooter, { color: textColor }]}>{footerText}</Text> : null}
+        {buttons.map((btn: any, i: number) => {
+          const id = btn?.reply?.id ?? String(i);
+          const title = btn?.reply?.title ?? btn?.text ?? "";
+          return (
+            <View key={i}>
+              <View style={[styles.divider, { borderTopColor: textColor + "22" }]} />
+              <TouchableOpacity
+                style={styles.iActionBtn}
+                disabled={disabled || !onReply}
+                onPress={() => onReply?.({ type: "button_reply", id, title, messageId })}
+              >
+                <Text style={[styles.iActionText, { color: textColor, fontSize }]}>↩ {title}</Text>
+              </TouchableOpacity>
+            </View>
+          );
+        })}
+      </View>
+    );
+  }
+
+  // fallback
+  return bodyText ? <Text style={[styles.text, { color: textColor, fontSize }]}>{bodyText}</Text> : null;
+}
+
+// ── main renderer ─────────────────────────────────────────────────────────────
+
+export type LivechatMessageRendererProps = {
+  message: any;
+  textColor: string;
+  fontSize: number;
+  onInteractiveReply?: (payload: InteractiveReplyPayload) => void;
+  onShowListPicker?: ShowListPickerFn;
+  disabled?: boolean;
+};
+
+export function LivechatMessageRenderer({
+  message,
+  textColor,
+  fontSize,
+  onInteractiveReply,
+  onShowListPicker,
+  disabled,
+}: LivechatMessageRendererProps) {
+  const lc = message?.livechat;
+  if (!lc) return null;
+
+  switch (lc.type) {
+    case "text":
+      return <TextRenderer body={lc.text?.body ?? ""} textColor={textColor} fontSize={fontSize} />;
+    case "image":
+      return <ImageRenderer url={lc.image?.link ?? lc.image?.url ?? ""} caption={lc.image?.caption} textColor={textColor} />;
+    case "video":
+      return <VideoRenderer url={lc.video?.link ?? lc.video?.url ?? ""} caption={lc.video?.caption} textColor={textColor} />;
+    case "audio":
+      return <AudioRenderer url={lc.audio?.link ?? lc.audio?.url ?? ""} />;
+    case "document":
+      return <DocumentRenderer url={lc.document?.link ?? lc.document?.url ?? ""} filename={lc.document?.filename ?? message?.fileName ?? "Document"} textColor={textColor} />;
+    case "interactive":
+      return (
+        <InteractiveRenderer
+          message={message}
+          textColor={textColor}
+          fontSize={fontSize}
+          onReply={onInteractiveReply}
+          onShowListPicker={onShowListPicker}
+          disabled={disabled}
+        />
+      );
+    default:
+      return <Text style={[styles.text, { color: textColor, fontSize }]}>[Message]</Text>;
+  }
+}
+
+const styles = StyleSheet.create({
+  text: { lineHeight: 22, paddingHorizontal: 12, paddingVertical: 8, flexShrink: 1 },
+  pad: { paddingHorizontal: 12, paddingVertical: 8 },
+  caption: { fontSize: 12, paddingHorizontal: 8, paddingBottom: 6, marginTop: 2 },
+  mediaPad: { padding: 4 },
+  mediaImage: { width: 260, height: 180, borderRadius: 8 },
+  videoBox: { width: 260, height: 160, backgroundColor: "#000", borderRadius: 8, alignItems: "center", justifyContent: "center" },
+  playOverlay: { width: 48, height: 48, borderRadius: 24, backgroundColor: "rgba(255,255,255,0.85)", alignItems: "center", justifyContent: "center" },
+  playIcon: { fontSize: 20, marginLeft: 3 },
+  audioRow: { flexDirection: "row", alignItems: "center", paddingHorizontal: 12, paddingVertical: 10, gap: 8 },
+  audioIcon: { fontSize: 18 },
+  audioLabel: { fontSize: 13, color: "#71717a" },
+  docRow: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 12, paddingVertical: 10, maxWidth: 260 },
+  docIcon: { fontSize: 20 },
+  docName: { flex: 1, fontSize: 13 },
+  docDownload: { fontSize: 16, fontWeight: "600" },
+  iHeader: { fontSize: 14, fontWeight: "600", paddingHorizontal: 12, paddingTop: 10, paddingBottom: 2 },
+  iFooter: { fontSize: 11, fontStyle: "italic", paddingHorizontal: 12, paddingBottom: 6, opacity: 0.6 },
+  divider: { borderTopWidth: StyleSheet.hairlineWidth, marginHorizontal: 0 },
+  iActionBtn: { paddingHorizontal: 12, paddingVertical: 10, alignItems: "center" },
+  iActionText: { fontWeight: "500", textAlign: "center" },
+});

package/src/ui/components/LogMessage.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { useLiveChatContext } from "../../provider/LiveChatContext";
+
+function pickActorEntity(message: any) {
+  const actor = message?.log?.actor;
+  if (!actor?.type) return null;
+  if (actor.type === "user") return actor.userId;
+  if (actor.type === "bot") return actor.botId;
+  if (actor.type === "ai") return actor.aiId;
+  return null;
+}
+
+function assignerDisplayName(message: any): string {
+  const entity = pickActorEntity(message);
+  const n =
+    typeof entity?.name === "string"
+      ? entity.name.trim()
+      : typeof entity?.displayName === "string"
+      ? entity.displayName.trim()
+      : "";
+  if (n) return n;
+
+  // fallback: parse from raw body string e.g. "jagan has joined the chat"
+  const body = message?.livechat?.text?.body ?? message?.content ?? "";
+  const joinMatch = body.match(/^(.+?) has joined/i);
+  if (joinMatch) return joinMatch[1].trim();
+  const closeMatch = body.match(/^(.+?) has closed/i);
+  if (closeMatch) return closeMatch[1].trim();
+  const leftMatch = body.match(/^(.+?) has left/i);
+  if (leftMatch) return leftMatch[1].trim();
+
+  return message?.userId?.name ?? message?.actorName ?? "Someone";
+}
+
+function resolveSuffix(message: any): string | null {
+  const event = message?.log?.action?.event;
+
+  if (event === "marked_as_spam") return null;
+  if (event === "unassigned") return "has left the chat";
+  if (event === "resolved") return "has closed the chat";
+  if (event === "assigned") return "has joined the chat";
+
+  if (event) {
+    const assign = message?.log?.action?.assign;
+    if (assign) return "has joined the chat";
+    return null;
+  }
+
+  // fallback: parse from raw body
+  const body = message?.livechat?.text?.body ?? message?.content ?? "";
+  const logType = message?.livechat?.logType ?? message?.logType ?? "";
+  if (logType === "resolved" || body.toLowerCase().includes("closed")) return "has closed the chat";
+  if (logType === "unassigned" || body.toLowerCase().includes("left")) return "has left the chat";
+  if (logType === "assigned" || body.toLowerCase().includes("joined")) return "has joined the chat";
+
+  return body || null;
+}
+
+export type LogMessageProps = {
+  message: any;
+};
+
+export function LogMessage({ message }: LogMessageProps) {
+  const { theme: t } = useLiveChatContext();
+  const suffix = resolveSuffix(message);
+  if (!suffix) return null;
+
+  const name = assignerDisplayName(message);
+
+  return (
+    <View style={styles.row}>
+      <Text style={[styles.text, { color: t.colors.textMuted }]}>
+        {name ? (
+          <>
+            <Text style={{ color: t.colors.text, fontWeight: "600" }}>{name}</Text>
+            {" " + suffix}
+          </>
+        ) : suffix}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { alignItems: "center", paddingVertical: 8, paddingHorizontal: 16 },
+  text: { textAlign: "center", fontSize: 12, lineHeight: 18 },
+});

package/src/ui/components/MessageBubble.tsx

@@ -0,0 +1,148 @@
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { useLiveChatContext } from "../../provider/LiveChatContext";
+import { LivechatMessageRenderer } from "./LivechatMessageRenderer";
+import type { InteractiveReplyPayload, ShowListPickerFn } from "./LivechatMessageRenderer";
+
+export type BubblePosition = "single" | "first" | "middle" | "last";
+
+export type MessageBubbleProps = {
+  message: any;
+  isOutgoing?: boolean;
+  position?: BubblePosition;
+  showFooter?: boolean;
+  senderName?: string;
+  roleLabel?: string;
+  onInteractiveReply?: (payload: InteractiveReplyPayload | string) => void;
+  onShowListPicker?: ShowListPickerFn;
+  disabled?: boolean;
+};
+
+// ── bubble radius — mirrors web contact/agent bubble radius logic ─────────────
+
+function getBubbleRadius(position: BubblePosition, outgoing: boolean, base: number) {
+  const sm = 5;
+  if (outgoing) {
+    switch (position) {
+      case "first":  return { borderTopLeftRadius: base, borderTopRightRadius: base, borderBottomLeftRadius: base, borderBottomRightRadius: sm };
+      case "middle": return { borderTopLeftRadius: base, borderTopRightRadius: sm,   borderBottomLeftRadius: base, borderBottomRightRadius: sm };
+      case "last":   return { borderTopLeftRadius: base, borderTopRightRadius: sm,   borderBottomLeftRadius: base, borderBottomRightRadius: base };
+      default:       return { borderTopLeftRadius: base, borderTopRightRadius: base, borderBottomLeftRadius: base, borderBottomRightRadius: base };
+    }
+  } else {
+    switch (position) {
+      case "first":  return { borderTopLeftRadius: base, borderTopRightRadius: base, borderBottomLeftRadius: sm,   borderBottomRightRadius: base };
+      case "middle": return { borderTopLeftRadius: sm,   borderTopRightRadius: base, borderBottomLeftRadius: sm,   borderBottomRightRadius: base };
+      case "last":   return { borderTopLeftRadius: sm,   borderTopRightRadius: base, borderBottomLeftRadius: base, borderBottomRightRadius: base };
+      default:       return { borderTopLeftRadius: base, borderTopRightRadius: base, borderBottomLeftRadius: base, borderBottomRightRadius: base };
+    }
+  }
+}
+
+// ── footer — mirrors web buildAgentMeta / buildContactMeta ───────────────────
+
+function formatMetaRelativeTime(dateStr?: string): string {
+  if (!dateStr) return "now";
+  const d = new Date(dateStr);
+  if (isNaN(d.getTime())) return "now";
+  const diff = Date.now() - d.getTime();
+  if (diff < 60_000) return "now";
+  const m = Math.floor(diff / 60_000);
+  if (m < 60) return `${m}m`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h`;
+  const day = Math.floor(h / 24);
+  if (day < 7) return `${day}d`;
+  return d.toLocaleDateString([], { month: "short", day: "numeric" });
+}
+
+function GroupFooter({
+  message,
+  outgoing,
+  mutedColor,
+  senderName,
+  roleLabel,
+}: {
+  message: any;
+  outgoing: boolean;
+  mutedColor: string;
+  senderName?: string;
+  roleLabel?: string;
+}) {
+  const dateStr = message?.createdAt || message?.livechat?.timestamp;
+  const time = formatMetaRelativeTime(dateStr);
+
+  if (outgoing) {
+    return <Text style={[styles.footerText, styles.footerRight, { color: mutedColor }]}>{time}</Text>;
+  }
+
+  // mirrors web buildAgentMeta: name • role • time
+  const parts = [senderName, roleLabel, time].filter(Boolean).join(" \u2022 ");
+  return <Text style={[styles.footerText, { color: mutedColor }]} numberOfLines={1}>{parts}</Text>;
+}
+
+// ── main component ────────────────────────────────────────────────────────────
+
+export function MessageBubble({
+  message,
+  isOutgoing,
+  position = "single",
+  showFooter = false,
+  senderName,
+  roleLabel,
+  onInteractiveReply,
+  onShowListPicker,
+  disabled,
+}: MessageBubbleProps) {
+  const { theme: t } = useLiveChatContext();
+
+  const outgoing = isOutgoing !== undefined ? isOutgoing : message?.senderType === "contact";
+
+  const bubbleBg = outgoing
+    ? t.useBrandThemingForChat ? t.colors.brand : t.colors.bubbleOut
+    : t.colors.bubbleIn;
+
+  const textColor = outgoing ? t.colors.bubbleTextOut : t.colors.bubbleTextIn;
+  const radiusStyle = getBubbleRadius(position, outgoing, t.borderRadius.bubble);
+  const marginBottom = position === "single" || position === "last" ? t.spacing.sm : t.spacing.xs / 2;
+
+  // normalize onInteractiveReply — web passes full payload, legacy passes string label
+  const handleInteractiveReply = onInteractiveReply
+    ? (payload: InteractiveReplyPayload) => onInteractiveReply(payload)
+    : undefined;
+
+  return (
+    <View style={{ marginBottom }}>
+      <View style={[styles.row, outgoing ? styles.rowRight : styles.rowLeft]}>
+        <View style={[styles.bubble, radiusStyle, { backgroundColor: bubbleBg, maxWidth: "78%" }]}>
+          <LivechatMessageRenderer
+            message={message}
+            textColor={textColor}
+            fontSize={t.fontSizes.md}
+            onInteractiveReply={handleInteractiveReply}
+            onShowListPicker={onShowListPicker}
+            disabled={disabled}
+          />
+        </View>
+      </View>
+      {showFooter ? (
+        <GroupFooter
+          message={message}
+          outgoing={outgoing}
+          mutedColor={t.colors.textMuted}
+          senderName={senderName}
+          roleLabel={roleLabel}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row", paddingHorizontal: 12, marginVertical: 1 },
+  rowLeft: { justifyContent: "flex-start" },
+  rowRight: { justifyContent: "flex-end" },
+  bubble: { overflow: "hidden" },
+  footerText: { fontSize: 11, color: "#71717a", paddingHorizontal: 16, marginTop: 2, marginBottom: 2 },
+  footerRight: { textAlign: "right" },
+});