@giovchat/react-native 0.0.0-stage → 0.2.0

package/src/color.ts

@@ -0,0 +1,74 @@
+/**
+ * Readable text on the workspace's colours (WCAG 2.x relative luminance and contrast ratio). The
+ * brand colour comes from the dashboard, so text on it is black or white, whichever reads better.
+ * Pure: no React or native modules.
+ */
+
+type Rgb = [number, number, number];
+
+/** `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`, `rgb()` and `rgba()`; anything else (named colours) is null. Alpha is ignored. */
+export function parseColor(value: unknown): Rgb | null {
+  if (typeof value !== "string") return null;
+  const text = value.trim().toLowerCase();
+  const hex = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(text)?.[1];
+  if (hex) {
+    const full = hex.length <= 4 ? [...hex.slice(0, 3)].map((digit) => digit + digit).join("") : hex.slice(0, 6);
+    return [0, 2, 4].map((at) => parseInt(full.slice(at, at + 2), 16)) as Rgb;
+  }
+  const rgb = /^rgba?\(\s*(\d{1,3})\s*[, ]\s*(\d{1,3})\s*[, ]\s*(\d{1,3})\s*(?:[,/]\s*[\d.]+%?\s*)?\)$/.exec(text);
+  if (rgb) {
+    const channels = rgb.slice(1, 4).map(Number);
+    return channels.every((channel) => channel <= 255) ? channels as Rgb : null;
+  }
+  return null;
+}
+
+/** WCAG relative luminance, 0 (black) to 1 (white). */
+export function luminance([r, g, b]: Rgb): number {
+  const linear = (channel: number) => {
+    const c = channel / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
+}
+
+/** WCAG contrast ratio, 1 to 21. */
+export function contrastRatio(a: Rgb, b: Rgb): number {
+  const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x) as [number, number];
+  return (light + 0.05) / (dark + 0.05);
+}
+
+const WHITE: Rgb = [255, 255, 255];
+const INK: Rgb = [17, 17, 17];
+export const WHITE_TEXT = "#fff";
+export const DARK_TEXT = "#111";
+
+/** White or near-black text, whichever contrasts more with `background`; white when the colour cannot be read. */
+export function textOn(background: unknown): string {
+  const rgb = parseColor(background);
+  if (!rgb) return WHITE_TEXT;
+  return contrastRatio(INK, rgb) > contrastRatio(WHITE, rgb) ? DARK_TEXT : WHITE_TEXT;
+}
+
+/** True when the text chosen for `background` is the dark one. */
+export function isLightBackground(background: unknown): boolean {
+  return textOn(background) === DARK_TEXT;
+}
+
+const hex = ([r, g, b]: Rgb) => "#" + [r, g, b].map((channel) => Math.round(channel).toString(16).padStart(2, "0")).join("");
+
+/**
+ * Quieter text for labels and times on `background`: the readable text colour softened as far as
+ * WCAG AA allows (4.5:1), and the full colour when even that is not enough.
+ */
+export function secondaryTextOn(background: unknown): string {
+  const rgb = parseColor(background);
+  const text = textOn(background);
+  if (!rgb) return text;
+  const target = text === DARK_TEXT ? INK : WHITE;
+  for (const alpha of [0.6, 0.7, 0.8, 0.9]) {
+    const blended = rgb.map((channel, index) => Math.round(channel + (target[index]! - channel) * alpha)) as Rgb;
+    if (contrastRatio(blended, rgb) >= 4.5) return hex(blended);
+  }
+  return text;
+}

package/src/components/Attachments.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from "react";
+import { Image, Linking, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { attachmentName, isImageAttachment, previewBoxSize, type GiovAttachment } from "../attachments";
+import { useGiovChatStrings } from "../i18n";
+
+export interface AttachmentListProps {
+  attachments: GiovAttachment[];
+  /** Adds the download credential to a stored attachment URL. */
+  resolveUrl: (url: string) => string;
+  dark: boolean;
+  /** The bubble's text colour, for file rows. */
+  textColor: string;
+}
+
+function open(url: string) {
+  if (/^https?:\/\//i.test(url)) void Linking.openURL(url).catch(() => undefined);
+}
+
+/** Images inline in a box of their final shape (the placeholder shows until they load); other files as rows. */
+export function AttachmentList({ attachments, resolveUrl, dark, textColor }: AttachmentListProps) {
+  const strings = useGiovChatStrings();
+  return (
+    <View style={styles.list}>
+      {attachments.map((attachment, index) => {
+        const url = resolveUrl(attachment.url);
+        const name = attachmentName(attachment) || (isImageAttachment(attachment) ? strings.image : strings.attachment);
+        return isImageAttachment(attachment)
+          ? <AttachmentImage key={`${attachment.url}-${index}`} attachment={attachment} url={url} name={name} dark={dark} />
+          : (
+            <TouchableOpacity
+              key={`${attachment.url}-${index}`}
+              style={[styles.file, { borderColor: dark ? "rgba(255,255,255,0.18)" : "rgba(0,0,0,0.12)" }]}
+              onPress={() => open(url)}
+              accessibilityRole="link"
+              accessibilityLabel={strings.openAttachment(name)}
+            >
+              <Text style={[styles.fileIcon, { color: textColor }]}>⎙</Text>
+              <Text style={[styles.fileName, { color: textColor }]} numberOfLines={1}>{name}</Text>
+            </TouchableOpacity>
+          );
+      })}
+    </View>
+  );
+}
+
+function AttachmentImage({ attachment, url, name, dark }: { attachment: GiovAttachment; url: string; name: string; dark: boolean }) {
+  const strings = useGiovChatStrings();
+  const [loaded, setLoaded] = useState(false);
+  // A failed load is tied to its URL: a renewed credential gives a new URL, and the image loads again.
+  const [failedUrl, setFailedUrl] = useState<string | null>(null);
+  const failed = failedUrl === url;
+  const box = previewBoxSize(attachment.preview) ?? { width: 200, height: 150 };
+  return (
+    <TouchableOpacity onPress={() => open(url)} accessibilityRole="imagebutton" accessibilityLabel={strings.openAttachment(name)}>
+      <View style={[styles.imageBox, box, { backgroundColor: dark ? "#1f1f1f" : "#ececec" }]}>
+        {attachment.preview?.thumb && !loaded && (
+          <Image source={{ uri: attachment.preview.thumb }} style={styles.fill} blurRadius={6} accessible={false} />
+        )}
+        <Image key={url} source={{ uri: url }} style={styles.fill} resizeMode="cover" accessible={false}
+          onLoad={() => { setLoaded(true); setFailedUrl(null); }} onError={() => setFailedUrl(url)} />
+        {failed && <Text style={[styles.unavailable, { color: dark ? "#d4d4d4" : "#404040" }]}>{strings.imageUnavailable}</Text>}
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  list: { gap: 6, marginBottom: 4 },
+  imageBox: { borderRadius: 10, overflow: "hidden" },
+  fill: { position: "absolute", top: 0, right: 0, bottom: 0, left: 0 },
+  unavailable: { position: "absolute", left: 8, right: 8, bottom: 8, fontSize: 12, textAlign: "center" },
+  file: { flexDirection: "row", alignItems: "center", gap: 8, borderWidth: 1, borderRadius: 10, paddingHorizontal: 10, paddingVertical: 8, maxWidth: 240 },
+  fileIcon: { fontSize: 16 },
+  fileName: { fontSize: 13, flexShrink: 1, textDecorationLine: "underline" },
+});

package/src/components/Branding.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Linking, StyleSheet, Text, TouchableOpacity } from "react-native";
+
+/** Deliberately isolated from customizable styles, including the global font. */
+export function Branding({ showBranding }: { showBranding?: boolean }) {
+  if (showBranding === false) return null;
+
+  return (
+    <TouchableOpacity
+      style={styles.container}
+      accessibilityRole="link"
+      accessibilityLabel="Powered by GiovChat"
+      onPress={() => {
+        void Linking.openURL("https://giovchat.app/?utm_source=react_native_widget&utm_medium=powered_by")
+          .catch(() => {});
+      }}
+    >
+      <Text style={styles.text}>Powered by <Text style={styles.brand}>GiovChat</Text></Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexShrink: 0,
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    backgroundColor: "#fff",
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "#ebebeb",
+  },
+  text: { color: "#52525b", fontSize: 12 },
+  brand: { color: "#7c3aed", fontWeight: "700" },
+});

package/src/components/ChatMarkdown.tsx

@@ -0,0 +1,111 @@
+import React, { memo, useMemo, type ReactNode } from "react";
+import { Linking, Platform, StyleSheet, Text, View, type StyleProp, type TextStyle } from "react-native";
+import { isOpenableHref, parseChatMarkdown, type Block, type InlineLine, type InlineNode, type ListBlock } from "../markdown";
+
+export interface ChatMarkdownProps {
+  content: string;
+  /** The bubble's text style (colour, font); every run carries it so overrides reach each word. */
+  textStyle: StyleProp<TextStyle>;
+  /** Quote bars and rules: a translucent tone of the text colour reads on any bubble. */
+  accentColor: string;
+  codeBackground: string;
+}
+
+const MONOSPACE = Platform.OS === "ios" ? "Menlo" : "monospace";
+
+function openLink(href: string | undefined) {
+  if (isOpenableHref(href)) void Linking.openURL(href).catch(() => undefined);
+}
+
+function inlineStyle(node: InlineNode, codeBackground: string): TextStyle {
+  const style: TextStyle = {};
+  if (node.marks.bold) style.fontWeight = "700";
+  if (node.marks.italic) style.fontStyle = "italic";
+  const lines = [node.marks.underline || node.href ? "underline" : null, node.marks.strike ? "line-through" : null].filter(Boolean);
+  if (lines.length) style.textDecorationLine = lines.join(" ") as TextStyle["textDecorationLine"];
+  if (node.marks.code) {
+    style.fontFamily = MONOSPACE;
+    style.backgroundColor = codeBackground;
+    style.fontSize = 13;
+  }
+  return style;
+}
+
+function renderLines(lines: InlineLine[], textStyle: StyleProp<TextStyle>, codeBackground: string, keyPrefix: string): ReactNode[] {
+  return lines.flatMap((line, lineIndex) => [
+    lineIndex > 0 ? "\n" : null,
+    ...line.map((node, index) => (
+      <Text
+        accessibilityRole={node.href ? "link" : undefined}
+        key={`${keyPrefix}-${lineIndex}-${index}`}
+        onPress={node.href ? () => openLink(node.href) : undefined}
+        style={[textStyle, inlineStyle(node, codeBackground)]}
+      >
+        {node.text}
+      </Text>
+    )),
+  ]);
+}
+
+function ChatMarkdownImpl({ content, textStyle, accentColor, codeBackground }: ChatMarkdownProps) {
+  const blocks = useMemo(() => parseChatMarkdown(content), [content]);
+
+  const renderList = (list: ListBlock, key: string): ReactNode => (
+    <View key={key} style={styles.list}>
+      {list.items.map((item, index) => (
+        <View key={`${key}-${index}`} style={styles.listItem}>
+          <Text style={[textStyle, styles.marker]}>{list.ordered ? `${list.start + index}.` : "•"}</Text>
+          <View style={styles.listBody}>
+            <Text style={textStyle}>{renderLines(item.lines, textStyle, codeBackground, `${key}-${index}`)}</Text>
+            {item.children.map((child, childIndex) => renderList(child, `${key}-${index}-${childIndex}`))}
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+
+  const renderBlock = (block: Block, index: number): ReactNode => {
+    const key = `b${index}`;
+    switch (block.type) {
+      case "paragraph":
+        return <Text key={key} style={textStyle}>{renderLines(block.lines, textStyle, codeBackground, key)}</Text>;
+      case "heading":
+        return <Text key={key} style={[textStyle, styles.heading]} accessibilityRole="header">{renderLines([block.content], [textStyle, styles.heading], codeBackground, key)}</Text>;
+      case "code":
+        return (
+          <View key={key} style={[styles.codeBlock, { backgroundColor: codeBackground }]}>
+            <Text style={[textStyle, styles.codeText]}>{block.text}</Text>
+          </View>
+        );
+      case "rule":
+        return <View key={key} style={[styles.rule, { backgroundColor: accentColor }]} />;
+      case "quote":
+        return (
+          <View key={key} style={[styles.quote, { borderLeftColor: accentColor }]}>
+            <Text style={[textStyle, styles.quoteText]}>{renderLines(block.lines, textStyle, codeBackground, key)}</Text>
+          </View>
+        );
+      case "list":
+        return renderList(block, key);
+    }
+  };
+
+  return <View style={styles.root}>{blocks.map(renderBlock)}</View>;
+}
+
+/** Chat Markdown (the widget and web inbox grammar) as native text; links open through Linking. */
+export const ChatMarkdown = memo(ChatMarkdownImpl);
+
+const styles = StyleSheet.create({
+  root: { gap: 4 },
+  heading: { fontWeight: "700" },
+  list: { gap: 2 },
+  listItem: { flexDirection: "row", gap: 6 },
+  marker: { minWidth: 14 },
+  listBody: { flex: 1, gap: 2 },
+  codeBlock: { borderRadius: 8, paddingHorizontal: 8, paddingVertical: 6 },
+  codeText: { fontFamily: MONOSPACE, fontSize: 13, lineHeight: 18 },
+  rule: { height: StyleSheet.hairlineWidth, marginVertical: 4, opacity: 0.6 },
+  quote: { borderLeftWidth: 3, paddingLeft: 8 },
+  quoteText: { opacity: 0.85 },
+});

package/src/components/GiovBotMark.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Image } from "react-native";
+import { giovBotMarkDataUri } from "../brand-assets";
+
+/** Compact native fallback rasterized from the canonical GiovBot vector artwork. */
+export function GiovBotMark({ size = 28 }: { size?: number }) {
+  return (
+    <Image
+      source={{ uri: giovBotMarkDataUri, width: 64, height: 64 }}
+      style={{ width: size, height: size, flexShrink: 0, marginTop: 2 }}
+      resizeMode="contain"
+      accessible={false}
+      accessibilityElementsHidden
+      importantForAccessibility="no"
+      accessibilityIgnoresInvertColors
+      testID="giovbot-mark"
+    />
+  );
+}

package/src/components/GreetingBubble.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Text, View } from "react-native";
+import { bubbleStyles as s } from "./bubbleStyles";
+import { useWidgetStyles } from "./WidgetStyles";
+
+export interface GreetingBubbleProps {
+  text: string;
+  dark: boolean;
+}
+
+export function GreetingBubble({ text, dark }: GreetingBubbleProps) {
+  const custom = useWidgetStyles();
+  return (
+    <View style={[s.wrapper, s.left, { marginTop: 16 }]}>
+      <View style={[s.bubble, s.agentBubble, dark && s.agentBubbleDark, custom.agentBubble]}>
+        <Text style={[s.content, { color: dark ? "#f0f0f0" : "#111" }, custom.agentText]}>{text}</Text>
+      </View>
+    </View>
+  );
+}

package/src/components/Header.tsx

@@ -0,0 +1,131 @@
+import React, { useState } from "react";
+import { Image, Linking, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { useWidgetStyles } from "./WidgetStyles";
+import { GiovBotMark } from "./GiovBotMark";
+import { useGiovChatStrings } from "../i18n";
+import type { HeaderIdentityKind } from "../identity";
+import { isLightBackground, secondaryTextOn, textOn } from "../color";
+
+export interface HeaderProps {
+  title: string;
+  subtitle?: string | null;
+  primaryColor: string;
+  onClose?: () => void;
+  /** Photo for the person or bot answering (http(s) only). */
+  avatarUrl?: string | null;
+  /** Who is answering; a bot without its own avatar shows the GiovBot mark. */
+  kind?: HeaderIdentityKind;
+  /** The workspace's privacy policy (https); the menu links to Giov's when there is none, as the web widget does. */
+  privacyPolicyUrl?: string;
+}
+
+/** The web widget's fallback (apps/widget-web/src/components/ChatMenu.tsx). */
+export const DEFAULT_PRIVACY_POLICY_URL = "https://giovchat.app/privacy";
+
+export function Header({ title, subtitle, primaryColor, onClose, avatarUrl, kind, privacyPolicyUrl }: HeaderProps) {
+  const custom = useWidgetStyles();
+  const strings = useGiovChatStrings();
+  const [menuOpen, setMenuOpen] = useState(false);
+  // Black or white on the brand colour by WCAG contrast; the host's text colours still win.
+  const background = custom.header.backgroundColor ?? primaryColor;
+  const ink = textOn(background);
+  return (
+    <View style={[styles.container, { backgroundColor: primaryColor }, custom.header]}>
+      <View style={[styles.avatar, isLightBackground(background) && styles.avatarOnLight]}>
+        {avatarUrl ? (
+          <Image source={{ uri: avatarUrl }} style={styles.avatarImage} accessible={false} />
+        ) : kind === "bot" ? (
+          <GiovBotMark size={26} />
+        ) : (
+          <Text style={[styles.avatarLetter, { color: ink }, custom.headerTitle]}>{title.charAt(0).toUpperCase()}</Text>
+        )}
+      </View>
+      <View style={styles.info}>
+        <Text style={[styles.title, { color: ink }, custom.headerTitle]} numberOfLines={1} accessibilityRole="header">
+          {title}
+        </Text>
+        {subtitle ? (
+          <Text style={[styles.subtitle, { color: secondaryTextOn(background) }, custom.headerSubtitle]} numberOfLines={1}>
+            {subtitle}
+          </Text>
+        ) : null}
+      </View>
+      <TouchableOpacity
+        onPress={() => setMenuOpen((open) => !open)}
+        hitSlop={{ top: 12, bottom: 12, left: 8, right: 8 }}
+        accessibilityLabel={strings.menu}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: menuOpen }}
+      >
+        <Text style={[styles.closeIcon, { color: custom.headerTitle.color ?? ink }]}>⋯</Text>
+      </TouchableOpacity>
+      {menuOpen && (
+        <View style={styles.menu}>
+          <TouchableOpacity
+            style={styles.menuItem}
+            accessibilityRole="link"
+            accessibilityLabel={strings.privacyPolicy}
+            onPress={() => {
+              setMenuOpen(false);
+              void Linking.openURL(privacyPolicyUrl ?? DEFAULT_PRIVACY_POLICY_URL).catch(() => undefined);
+            }}
+          >
+            <Text style={styles.menuText}>{strings.privacyPolicy}</Text>
+          </TouchableOpacity>
+        </View>
+      )}
+      {onClose && (
+        <TouchableOpacity
+          onPress={onClose}
+          hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+          accessibilityLabel={strings.closeChat}
+          accessibilityRole="button"
+        >
+          <Text style={[styles.closeIcon, { color: custom.headerTitle.color ?? ink }]}>✕</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    gap: 12,
+    zIndex: 2,
+  },
+  menu: {
+    position: "absolute",
+    top: "100%",
+    right: 12,
+    backgroundColor: "#fff",
+    borderRadius: 10,
+    paddingVertical: 4,
+    shadowColor: "#000",
+    shadowOpacity: 0.15,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 4 },
+    elevation: 6,
+  },
+  menuItem: { paddingHorizontal: 14, paddingVertical: 10 },
+  menuText: { color: "#111", fontSize: 14 },
+  avatar: {
+    width: 38,
+    height: 38,
+    borderRadius: 19,
+    backgroundColor: "rgba(255,255,255,0.22)",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+  },
+  avatarOnLight: { backgroundColor: "rgba(0,0,0,0.1)" },
+  avatarImage: { width: 38, height: 38 },
+  avatarLetter: { color: "#fff", fontWeight: "700", fontSize: 17 },
+  info: { flex: 1 },
+  title: { color: "#fff", fontWeight: "700", fontSize: 16 },
+  subtitle: { color: "rgba(255,255,255,0.78)", fontSize: 12, marginTop: 2 },
+  closeIcon: { color: "#fff", fontSize: 18, fontWeight: "300", lineHeight: 22 },
+});

package/src/components/MessageBubble.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import { Text, TouchableOpacity, View } from "react-native";
+import type { GiovMessage } from "../types";
+import { bubbleStyles as s } from "./bubbleStyles";
+import { useWidgetStyles } from "./WidgetStyles";
+import { GiovBotMark } from "./GiovBotMark";
+import { ChatMarkdown } from "./ChatMarkdown";
+import { AttachmentList } from "./Attachments";
+import { messageSenderLabel } from "../identity";
+import { useGiovChatStrings } from "../i18n";
+import { isLightBackground, secondaryTextOn, textOn } from "../color";
+
+export interface MessageBubbleProps {
+  message: GiovMessage;
+  primaryColor: string;
+  dark: boolean;
+  botName?: string;
+  /** Adds the download credential to attachment URLs. Without it, attachments load as stored. */
+  resolveAttachmentUrl?: (url: string) => string;
+  /** Offered on a visitor message that failed to send. */
+  onRetry?: (message: GiovMessage) => void;
+  /** Drops a visitor message that failed to send (a refused one can never succeed on retry). */
+  onDiscard?: (message: GiovMessage) => void;
+}
+
+const identity = (url: string) => url;
+
+export function MessageBubble({ message, primaryColor, dark, botName, resolveAttachmentUrl = identity, onRetry, onDiscard }: MessageBubbleProps) {
+  const custom = useWidgetStyles();
+  const strings = useGiovChatStrings();
+  const isVisitor = message.role === "visitor";
+  const isBot = message.role === "agent" && message.isBot === true;
+  const textStyle = isVisitor ? custom.visitorText : custom.agentText;
+  // Text on the brand colour is black or white by WCAG contrast; labels and times keep 4.5:1 on their bubble.
+  const bubbleColor = isVisitor ? custom.visitorBubble.backgroundColor ?? primaryColor : custom.agentBubble.backgroundColor ?? (dark ? "#242424" : "#f0f0f0");
+  const lightVisitor = isVisitor && isLightBackground(bubbleColor);
+  const textColor = isVisitor ? textOn(bubbleColor) : dark ? "#f0f0f0" : "#111";
+  const quietColor = secondaryTextOn(bubbleColor);
+  const failed = isVisitor && message.status === "failed";
+
+  const senderLabel = messageSenderLabel(message, { botName, you: strings.you, automated: strings.automated, agent: strings.agent });
+
+  const time = new Date(message.createdAt).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+
+  return (
+    <View style={[s.wrapper, isVisitor ? s.right : s.left, isBot && s.assistantRow]}>
+      {isBot && <GiovBotMark />}
+      <View
+        style={[
+          s.bubble,
+          isVisitor
+            ? [s.visitorBubble, { backgroundColor: primaryColor }]
+            : [s.agentBubble, dark && s.agentBubbleDark],
+          isVisitor ? custom.visitorBubble : custom.agentBubble,
+          message.status === "sending" && { opacity: 0.75 },
+        ]}
+        accessibilityState={message.isStreaming ? { busy: true } : undefined}
+      >
+        <Text
+          style={[
+            s.sender,
+            { color: quietColor },
+            textStyle,
+          ]}
+        >
+          {senderLabel}
+        </Text>
+        {message.attachments?.length ? (
+          <AttachmentList attachments={message.attachments} resolveUrl={resolveAttachmentUrl} dark={isVisitor ? !lightVisitor : dark} textColor={typeof textStyle.color === "string" ? textStyle.color : textColor} />
+        ) : null}
+        {message.content ? (
+          <ChatMarkdown
+            content={message.content}
+            textStyle={[s.content, { color: textColor }, textStyle]}
+            accentColor={isVisitor ? (lightVisitor ? "rgba(0,0,0,0.35)" : "rgba(255,255,255,0.5)") : dark ? "rgba(255,255,255,0.3)" : "rgba(0,0,0,0.2)"}
+            codeBackground={isVisitor ? (lightVisitor ? "rgba(0,0,0,0.08)" : "rgba(255,255,255,0.18)") : dark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)"}
+          />
+        ) : null}
+        {!message.isStreaming && (
+          <Text
+            style={[
+              s.timestamp,
+              { color: quietColor },
+              textStyle,
+            ]}
+          >
+            {message.status === "sending" ? strings.sending : time}
+          </Text>
+        )}
+      </View>
+      {failed && (
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 12, marginTop: 4 }}>
+          <TouchableOpacity
+            onPress={onRetry ? () => onRetry(message) : undefined}
+            disabled={!onRetry}
+            accessibilityRole="button"
+            accessibilityLabel={`${strings.notSent}. ${strings.tapToRetry}`}
+            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+          >
+            <Text style={{ color: "#dc2626", fontSize: 12 }}>
+              {strings.notSent}{onRetry ? ` · ${strings.tapToRetry}` : ""}
+            </Text>
+          </TouchableOpacity>
+          {onDiscard && (
+            <TouchableOpacity
+              onPress={() => onDiscard(message)}
+              accessibilityRole="button"
+              accessibilityLabel={strings.discard}
+              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+            >
+              <Text style={{ color: dark ? "#999" : "#666", fontSize: 12 }}>{strings.discard}</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      )}
+    </View>
+  );
+}