@repzo/widget-react-native 1.0.0

package/src/ui/components/Markdown.tsx

@@ -0,0 +1,291 @@
+/**
+ * Minimal Markdown renderer for agent replies.
+ *
+ * The web widget uses react-markdown + remark-gfm; this SDK ships no runtime
+ * dependencies, so it supports the subset agents actually emit: paragraphs,
+ * bullet/numbered lists, bold, italic, inline code, fenced code and links
+ * (including bare URLs, linkified the same way the web widget does).
+ */
+
+import { Fragment } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { fontSize, palette, radius, spacing } from '../styles/theme';
+import { openExternalUrl } from '../utils/safe-url';
+
+// File-like extensions we should NOT treat as clickable domains (e.g. "report.pdf").
+const NON_LINK_EXTENSIONS = new Set([
+  'pdf',
+  'png',
+  'jpg',
+  'jpeg',
+  'gif',
+  'svg',
+  'webp',
+  'doc',
+  'docx',
+  'xls',
+  'xlsx',
+  'csv',
+  'txt',
+  'zip',
+  'rar',
+  'js',
+  'ts',
+  'tsx',
+  'jsx',
+  'json',
+  'md',
+  'html',
+  'css',
+  'exe',
+  'dmg',
+]);
+
+function linkifyPlainText(text: string): string {
+  const urlRe = /((?:https?:\/\/|www\.)[^\s<>()]+|(?:[a-z0-9-]+\.)+[a-z]{2,24}(?:\/[^\s<>()]*)?)/gi;
+  return text.replace(urlRe, (match) => {
+    const trailingMatch = match.match(/[.,!?;:)\]]+$/);
+    const tail = trailingMatch ? trailingMatch[0] : '';
+    const core = tail ? match.slice(0, -tail.length) : match;
+    const hasScheme = /^https?:\/\//i.test(core);
+    if (!hasScheme && !/\//.test(core)) {
+      const ext = core.split('.').pop()?.toLowerCase() ?? '';
+      if (NON_LINK_EXTENSIONS.has(ext)) return match;
+    }
+    const href = hasScheme ? core : `https://${core.replace(/^www\./i, '')}`;
+    return `[${core}](${href})${tail}`;
+  });
+}
+
+/** Turn bare URLs into markdown links while leaving code and existing links alone. */
+export function linkifyMarkdown(text: string): string {
+  if (!text) return text;
+  const protectedPattern = /(```[\s\S]*?```|`[^`]*`|!?\[[^\]]*\]\([^)]*\))/g;
+  return text
+    .split(protectedPattern)
+    .map((segment, index) => (index % 2 === 1 ? segment : linkifyPlainText(segment)))
+    .join('');
+}
+
+const INLINE_PATTERN =
+  /(\*\*[^*]+\*\*|__[^_]+__|\*[^*\n]+\*|_[^_\n]+_|`[^`]+`|!?\[[^\]]*\]\([^)]*\))/g;
+
+function openLink(href: string) {
+  void openExternalUrl(href);
+}
+
+/** Renders one line of markdown into nested <Text> runs. */
+function InlineMarkdown({ content, color }: { content: string; color: string }) {
+  const parts = content.split(INLINE_PATTERN).filter((part) => part !== undefined && part !== '');
+
+  return (
+    <>
+      {parts.map((part, index) => {
+        const key = `${index}-${part.slice(0, 8)}`;
+
+        if (/^(\*\*|__)[\s\S]+(\*\*|__)$/.test(part)) {
+          return (
+            <Text key={key} style={styles.bold}>
+              {part.slice(2, -2)}
+            </Text>
+          );
+        }
+        if (/^[*_][^*_][\s\S]*[*_]$/.test(part) && part.length > 2) {
+          return (
+            <Text key={key} style={styles.italic}>
+              {part.slice(1, -1)}
+            </Text>
+          );
+        }
+        if (/^`[^`]+`$/.test(part)) {
+          return (
+            <Text key={key} style={styles.inlineCode}>
+              {part.slice(1, -1)}
+            </Text>
+          );
+        }
+
+        const link = /^!?\[([^\]]*)\]\(([^)]*)\)$/.exec(part);
+        if (link) {
+          const label = link[1] || link[2] || '';
+          const href = link[2] || '';
+          return (
+            <Text
+              key={key}
+              style={[styles.link, { color }]}
+              onPress={href ? () => openLink(href) : undefined}>
+              {label}
+            </Text>
+          );
+        }
+
+        return <Fragment key={key}>{part}</Fragment>;
+      })}
+    </>
+  );
+}
+
+interface MarkdownProps {
+  content: string;
+  color: string;
+  /** Link color — defaults to the text color with an underline. */
+  linkColor?: string;
+}
+
+export function Markdown({ content, color, linkColor }: MarkdownProps) {
+  const blocks = parseBlocks(linkifyMarkdown(content));
+  const effectiveLinkColor = linkColor ?? color;
+
+  return (
+    <View>
+      {blocks.map((block, index) => {
+        const key = `block-${index}`;
+
+        if (block.type === 'code') {
+          return (
+            <View key={key} style={styles.codeBlock}>
+              <Text style={styles.codeBlockText}>{block.lines.join('\n')}</Text>
+            </View>
+          );
+        }
+
+        if (block.type === 'list') {
+          return (
+            <View key={key} style={styles.list}>
+              {block.items.map((item, itemIndex) => (
+                <View key={`${key}-${itemIndex}`} style={styles.listItem}>
+                  <Text style={[styles.listMarker, { color }]}>
+                    {block.ordered ? `${itemIndex + 1}.` : '•'}
+                  </Text>
+                  <Text style={[styles.text, styles.listItemText, { color }]}>
+                    <InlineMarkdown content={item} color={effectiveLinkColor} />
+                  </Text>
+                </View>
+              ))}
+            </View>
+          );
+        }
+
+        return (
+          <Text key={key} style={[styles.text, index > 0 && styles.paragraphSpacing, { color }]}>
+            <InlineMarkdown content={block.lines.join('\n')} color={effectiveLinkColor} />
+          </Text>
+        );
+      })}
+    </View>
+  );
+}
+
+type Block =
+  | { type: 'paragraph'; lines: string[] }
+  | { type: 'code'; lines: string[] }
+  | { type: 'list'; ordered: boolean; items: string[] };
+
+function parseBlocks(content: string): Block[] {
+  const lines = content.split('\n');
+  const blocks: Block[] = [];
+  let paragraph: string[] = [];
+
+  const flushParagraph = () => {
+    if (paragraph.length > 0) {
+      blocks.push({ type: 'paragraph', lines: paragraph });
+      paragraph = [];
+    }
+  };
+
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index] as string;
+
+    if (line.trim().startsWith('```')) {
+      flushParagraph();
+      const code: string[] = [];
+      index += 1;
+      while (index < lines.length && !(lines[index] as string).trim().startsWith('```')) {
+        code.push(lines[index] as string);
+        index += 1;
+      }
+      blocks.push({ type: 'code', lines: code });
+      continue;
+    }
+
+    const bullet = /^\s*[-*+]\s+(.*)$/.exec(line);
+    const ordered = /^\s*\d+[.)]\s+(.*)$/.exec(line);
+    if (bullet || ordered) {
+      flushParagraph();
+      const isOrdered = !!ordered;
+      const items: string[] = [(bullet?.[1] ?? ordered?.[1] ?? '').trim()];
+      while (index + 1 < lines.length) {
+        const nextLine = lines[index + 1] as string;
+        const nextMatch = isOrdered
+          ? /^\s*\d+[.)]\s+(.*)$/.exec(nextLine)
+          : /^\s*[-*+]\s+(.*)$/.exec(nextLine);
+        if (!nextMatch) break;
+        items.push((nextMatch[1] ?? '').trim());
+        index += 1;
+      }
+      blocks.push({ type: 'list', ordered: isOrdered, items });
+      continue;
+    }
+
+    if (line.trim() === '') {
+      flushParagraph();
+      continue;
+    }
+
+    // Headings render as emphasised paragraphs — the bubble is already small.
+    paragraph.push(line.replace(/^#{1,6}\s+/, ''));
+  }
+
+  flushParagraph();
+  return blocks;
+}
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: fontSize.body,
+    lineHeight: fontSize.body * 1.45,
+  },
+  paragraphSpacing: {
+    marginTop: spacing.sm,
+  },
+  bold: {
+    fontWeight: '700',
+  },
+  italic: {
+    fontStyle: 'italic',
+  },
+  link: {
+    textDecorationLine: 'underline',
+  },
+  inlineCode: {
+    fontFamily: 'Courier',
+    fontSize: fontSize.meta,
+  },
+  codeBlock: {
+    marginTop: spacing.sm,
+    padding: spacing.sm,
+    borderRadius: radius.sm,
+    backgroundColor: 'rgba(0,0,0,0.06)',
+  },
+  codeBlockText: {
+    fontFamily: 'Courier',
+    fontSize: fontSize.meta,
+    color: palette.text,
+  },
+  list: {
+    marginTop: spacing.xs,
+  },
+  listItem: {
+    flexDirection: 'row',
+    marginBottom: spacing.xs,
+  },
+  listItemText: {
+    flex: 1,
+  },
+  listMarker: {
+    fontSize: fontSize.body,
+    lineHeight: fontSize.body * 1.45,
+    width: 20,
+  },
+});

package/src/ui/components/OutboundMessageCard.tsx

@@ -0,0 +1,154 @@
+/**
+ * Proactive / campaign card shown above the home + messages spaces.
+ * Port of `client/src/widget/components/OutboundMessageCard.tsx`.
+ */
+
+import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import type { OutboundMessage } from '../../types';
+import { htmlToText } from '../utils/html';
+import { openExternalUrl } from '../utils/safe-url';
+import { CloseIcon } from './icons';
+import { START_ALIGN } from '../utils/rtl';
+import { fontSize, palette, radius, shadows, spacing } from '../styles/theme';
+
+interface OutboundMessageCardProps {
+  message: OutboundMessage;
+  color: string;
+  labels: { title: string; cta: string; dismiss: string };
+  onDismiss: () => void;
+  onStartChat: (prefill?: string) => void;
+  onTrack?: (event: string, metadata?: Record<string, unknown>) => void;
+}
+
+export function OutboundMessageCard({
+  message,
+  color,
+  labels,
+  onDismiss,
+  onStartChat,
+  onTrack,
+}: OutboundMessageCardProps) {
+  const ctaLabel = message.ctaLabel || labels.cta;
+  const body = message.body || htmlToText(message.bodyHtml || '');
+
+  const handlePress = () => {
+    onTrack?.('widget_outbound_clicked', {
+      outboundId: message.id,
+      type: message.type,
+      hasCtaUrl: !!message.ctaUrl,
+    });
+
+    if (message.ctaUrl) {
+      void openExternalUrl(message.ctaUrl);
+      return;
+    }
+    onStartChat(htmlToText(message.prefill || '') || body);
+  };
+
+  return (
+    <View style={styles.wrapper}>
+      <View style={styles.card}>
+        {message.imageUrl ? (
+          <Image
+            source={{ uri: message.imageUrl }}
+            style={styles.image}
+            resizeMode="cover"
+            accessibilityIgnoresInvertColors
+          />
+        ) : null}
+        <View style={styles.body}>
+          <View style={styles.header}>
+            <View style={styles.headerCopy}>
+              <Text style={styles.title}>{message.title || labels.title}</Text>
+              {body ? <Text style={styles.description}>{body}</Text> : null}
+            </View>
+            <Pressable
+              onPress={onDismiss}
+              accessibilityRole="button"
+              accessibilityLabel={labels.dismiss}
+              hitSlop={12}
+              style={styles.dismiss}>
+              <CloseIcon size={16} color={palette.textSubtle} />
+            </Pressable>
+          </View>
+          <Pressable
+            onPress={handlePress}
+            accessibilityRole="button"
+            style={({ pressed }) => [
+              styles.cta,
+              { backgroundColor: color },
+              pressed && styles.ctaPressed,
+            ]}>
+            <Text style={styles.ctaLabel}>{ctaLabel}</Text>
+          </Pressable>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    padding: spacing.md + 2,
+    backgroundColor: palette.white,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: palette.borderSoft,
+  },
+  card: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.border,
+    borderRadius: radius.xl,
+    overflow: 'hidden',
+    backgroundColor: palette.white,
+    ...shadows.card,
+  },
+  image: {
+    width: '100%',
+    height: 150,
+  },
+  body: {
+    padding: spacing.lg,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: spacing.sm + 2,
+  },
+  headerCopy: {
+    flex: 1,
+    minWidth: 0,
+  },
+  title: {
+    textAlign: START_ALIGN,
+    fontSize: fontSize.title,
+    fontWeight: '600',
+    color: palette.ink,
+  },
+  description: {
+    textAlign: START_ALIGN,
+    marginTop: 5,
+    fontSize: fontSize.meta,
+    lineHeight: fontSize.meta * 1.45,
+    color: palette.textMuted,
+  },
+  dismiss: {
+    padding: spacing.xs,
+  },
+  cta: {
+    marginTop: spacing.md,
+    borderRadius: radius.pill,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: spacing.md,
+    minHeight: 44,
+  },
+  ctaPressed: {
+    opacity: 0.85,
+  },
+  ctaLabel: {
+    color: palette.white,
+    fontSize: fontSize.meta,
+    fontWeight: '600',
+  },
+});

package/src/ui/components/WidgetPanel.tsx

@@ -0,0 +1,133 @@
+/**
+ * Panel chrome: the colored header (with the assigned agent) and the bottom
+ * space switcher. Port of `client/src/widget/components/WidgetPanel.tsx`; the
+ * fixed-size floating card becomes a full-height sheet because the RN host is
+ * a modal, not an iframe pinned to a corner.
+ */
+
+import type { ReactNode } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import type { WidgetSpace, WidgetSpaceType } from '../../types';
+import { globalStyles } from '../styles/global';
+import { fontSize, palette, spacing } from '../styles/theme';
+import { ChatOutlineIcon, HomeIcon } from './icons';
+
+const SPACE_META: Record<
+  WidgetSpaceType,
+  { labelKey: 'home' | 'messages'; icon: (props: { size: number; color: string }) => ReactNode }
+> = {
+  home: { labelKey: 'home', icon: (props) => <HomeIcon {...props} /> },
+  messages: { labelKey: 'messages', icon: (props) => <ChatOutlineIcon {...props} /> },
+};
+
+interface WidgetPanelProps {
+  color: string;
+  children: ReactNode;
+  activeTab: WidgetSpaceType;
+  onTabChange: (tab: WidgetSpaceType) => void;
+  showTabs: boolean;
+  spaces: WidgetSpace[];
+  /** Messages received while the panel sat on another surface. */
+  unreadCount?: number;
+  labels: { home: string; messages: string; unread: string };
+}
+
+export function WidgetPanel({
+  color,
+  children,
+  activeTab,
+  onTabChange,
+  showTabs,
+  spaces,
+  unreadCount = 0,
+  labels,
+}: WidgetPanelProps) {
+  const enabledSpaces = spaces.filter((space) => space.enabled);
+
+  return (
+    <View style={globalStyles.screen}>
+      <View style={globalStyles.fill}>{children}</View>
+
+      {showTabs && enabledSpaces.length > 1 && (
+        <View style={styles.tabBar}>
+          {enabledSpaces.map((space) => {
+            const meta = SPACE_META[space.type];
+            if (!meta) return null;
+            const active = activeTab === space.type;
+            const showBadge = space.type === 'messages' && unreadCount > 0;
+            return (
+              <Pressable
+                key={space.type}
+                onPress={() => onTabChange(space.type)}
+                accessibilityRole="tab"
+                accessibilityState={{ selected: active }}
+                accessibilityLabel={
+                  showBadge ? `${labels[meta.labelKey]}, ${labels.unread}` : undefined
+                }
+                style={styles.tab}>
+                <View style={styles.tabIconWrap}>
+                  {meta.icon({ size: 22, color: active ? color : palette.textSubtle })}
+                  {showBadge ? (
+                    <View style={styles.tabBadge} pointerEvents="none">
+                      <Text style={styles.tabBadgeLabel}>
+                        {unreadCount > 9 ? '9+' : unreadCount}
+                      </Text>
+                    </View>
+                  ) : null}
+                </View>
+                <Text style={[styles.tabLabel, { color: active ? color : palette.textSubtle }]}>
+                  {labels[meta.labelKey]}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  tabIconWrap: {
+    position: 'relative',
+  },
+  tabBadge: {
+    position: 'absolute',
+    top: -5,
+    end: -12,
+    minWidth: 18,
+    height: 18,
+    borderRadius: 9,
+    paddingHorizontal: spacing.xs,
+    backgroundColor: palette.danger,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 2,
+    borderColor: palette.white,
+  },
+  tabBadgeLabel: {
+    fontSize: fontSize.micro,
+    fontWeight: '700',
+    color: palette.white,
+  },
+  tabBar: {
+    flexDirection: 'row',
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: palette.border,
+    backgroundColor: palette.white,
+  },
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 2,
+    paddingVertical: spacing.sm,
+    minHeight: 52,
+  },
+  tabLabel: {
+    fontSize: fontSize.caption,
+    // Weight stays constant across states — only color signals the active tab.
+    fontWeight: '600',
+  },
+});