@blario/react-native 0.0.0 → 0.1.0

package/src/chat/widget-shell.ts

@@ -0,0 +1,170 @@
+export interface ShellIdentity {
+  externalId: string;
+  email?: string;
+  name?: string;
+  phone?: string;
+  contactCompany?: string;
+  contactCompanyExternalId?: string;
+  country?: string;
+  customFields?: Record<string, string | number | boolean>;
+  identityToken?: string;
+  identitySignature?: string;
+  providesProof: boolean;
+}
+
+export interface WidgetShellOptions {
+  bundle: string | null;
+  scriptUrl: string | null;
+  publishableKey: string;
+  apiBaseUrl: string;
+  language: 'es' | 'en';
+  tabId: string;
+  primaryColor: string | null;
+  identity: ShellIdentity | null;
+}
+
+const MESSAGE_CREATE_PATH = '/api/ai/contact-sessions/\\\\d+/widget/messages/create/';
+
+function safeJson(value: unknown): string {
+  return JSON.stringify(value).replace(/</g, '\\u003c').replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029');
+}
+
+function escapeScriptText(text: string): string {
+  return text.replace(/<\/(script)/gi, '<\\/$1').replace(/<!--/g, '<\\!--');
+}
+
+const PAGE_PRELUDE = `
+(function () {
+  var boot = JSON.parse(document.getElementById('blar-boot').textContent);
+  try { sessionStorage.setItem('blar_tab_id', boot.tabId); } catch (error) {}
+
+  function post(message) {
+    if (window.ReactNativeWebView) window.ReactNativeWebView.postMessage(JSON.stringify(message));
+  }
+  window.__blarPost = post;
+
+  var pending = {};
+  var counter = 0;
+  function callNative(name, args) {
+    return new Promise(function (resolve, reject) {
+      var id = 'c' + (++counter);
+      var timer = setTimeout(function () { delete pending[id]; reject(new Error('native call timed out: ' + name)); }, 8000);
+      pending[id] = { resolve: resolve, reject: reject, timer: timer };
+      post({ kind: 'call', id: id, name: name, args: args || {} });
+    });
+  }
+  window.__blarCallNative = callNative;
+  window.__blarNative = {
+    resolve: function (id, value, error) {
+      var entry = pending[id];
+      if (!entry) return;
+      clearTimeout(entry.timer);
+      delete pending[id];
+      if (error) entry.reject(new Error(error)); else entry.resolve(value);
+    },
+    event: function (name, payload) {
+      window.dispatchEvent(new CustomEvent('blar-native', { detail: { name: name, payload: payload } }));
+    }
+  };
+
+  var nativeFetch = window.fetch.bind(window);
+  var messageCreate = new RegExp(boot.messageCreatePath + '$');
+  window.fetch = function (input, init) {
+    var url = typeof input === 'string' ? input : (input && input.url) || '';
+    var method = ((init && init.method) || (input && input.method) || 'GET').toUpperCase();
+    if (method !== 'POST' || !messageCreate.test(url.split('?')[0]) || !init || typeof init.body !== 'string') {
+      return nativeFetch(input, init);
+    }
+    return callNative('metadata', { includeTextDom: true }).then(function (metadata) {
+      var body = JSON.parse(init.body);
+      body.metadata = Object.assign({}, body.metadata || {}, metadata || {});
+      return nativeFetch(input, Object.assign({}, init, { body: JSON.stringify(body) }));
+    }, function () {
+      return nativeFetch(input, init);
+    });
+  };
+
+  ['error', 'unhandledrejection'].forEach(function (type) {
+    window.addEventListener(type, function (event) {
+      var reason = type === 'error' ? (event.message || '') : String(event.reason && event.reason.message || event.reason);
+      post({ kind: 'log', level: 'error', text: type + ': ' + reason });
+    });
+  });
+})();
+`;
+
+const PAGE_START = `
+(function () {
+  var boot = JSON.parse(document.getElementById('blar-boot').textContent);
+  var identity = boot.identity;
+  var widgetIdentity = null;
+  if (identity) {
+    widgetIdentity = {
+      externalId: identity.externalId, email: identity.email, name: identity.name, phone: identity.phone,
+      contactCompany: identity.contactCompany, contactCompanyExternalId: identity.contactCompanyExternalId,
+      customFields: identity.country ? Object.assign({ country: identity.country }, identity.customFields || {}) : identity.customFields,
+      identityToken: identity.identityToken, identitySignature: identity.identitySignature
+    };
+    if (identity.providesProof) {
+      widgetIdentity.getProof = function () { return window.__blarCallNative('proof', {}); };
+    }
+  }
+  var config = {
+    publishableKey: boot.publishableKey, apiBaseUrl: boot.apiBaseUrl, language: boot.language,
+    messagesOnly: true, autoOpen: true, startHidden: true, enableSound: false, showBranding: false,
+    agentExecution: false,
+    onClose: function () { window.__blarPost({ kind: 'closed' }); },
+    onSessionChange: function (sessionId) {
+      window.__blarPost({ kind: 'session', sessionId: typeof sessionId === 'number' ? sessionId : null });
+    }
+  };
+  if (boot.primaryColor) config.primaryColor = boot.primaryColor;
+  if (widgetIdentity) config.identity = widgetIdentity;
+  var widget = window.initSupportWidget(config);
+  window.__blarWidget = widget;
+  window.addEventListener('blar-native', function (event) {
+    var detail = event.detail || {};
+    var payload = detail.payload || {};
+    if (detail.name === 'open') {
+      Promise.resolve(widget.openChat()).catch(function () {});
+    } else if (detail.name === 'openSession' && typeof payload.sessionId === 'number') {
+      Promise.resolve(widget.openSession(payload.sessionId)).catch(function () {});
+    }
+  });
+  Promise.resolve(widget.openChat()).catch(function () {});
+  if (widgetIdentity) {
+    Promise.resolve(widget.setUser(widgetIdentity)).catch(function (error) {
+      window.__blarPost({ kind: 'log', level: 'error', text: 'setUser failed: ' + (error && error.message) });
+    });
+  }
+  window.__blarPost({ kind: 'ready' });
+})();
+`;
+
+export function buildWidgetShell(options: WidgetShellOptions): string {
+  const boot = {
+    publishableKey: options.publishableKey,
+    apiBaseUrl: options.apiBaseUrl,
+    language: options.language,
+    tabId: options.tabId,
+    primaryColor: options.primaryColor,
+    identity: options.identity,
+    messageCreatePath: MESSAGE_CREATE_PATH,
+  };
+  const widgetScript = options.scriptUrl !== null
+    ? `<script src="${options.scriptUrl}"></script>`
+    : `<script>${escapeScriptText(options.bundle ?? '')}</script>`;
+  return [
+    '<!doctype html>',
+    '<html><head><meta charset="utf-8">',
+    '<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">',
+    '<style>html,body{margin:0;height:100%;background:transparent;overflow:hidden}</style>',
+    '</head><body>',
+    `<script id="blar-boot" type="application/json">${safeJson(boot)}</script>`,
+    `<script>${PAGE_PRELUDE}</script>`,
+    widgetScript,
+    `<script>${PAGE_START}</script>`,
+    '</body></html>',
+  ].join('\n');
+}
+

package/src/confirmation/port.ts

@@ -0,0 +1,15 @@
+import type { TargetView } from '../actions/target.ts';
+import type { AgentAction, RiskLevel } from '../actions/types.ts';
+
+export interface ConfirmationRequest {
+  riskLevel: RiskLevel;
+  action: AgentAction;
+  explanation: string | null;
+  target: TargetView | null;
+}
+
+export type ConfirmationOutcome = 'confirmed' | 'declined' | 'timed_out';
+
+export interface ConfirmationPort {
+  confirm: (request: ConfirmationRequest) => Promise<ConfirmationOutcome>;
+}

package/src/fiber/locate.ts

@@ -0,0 +1,41 @@
+import { currentHostRoot } from './reader.ts';
+import type { Fiber } from './types.ts';
+
+export interface LocatedFiber {
+  fiber: Fiber;
+  ancestors: Fiber[];
+}
+
+function isSameFiber(candidate: Fiber, target: Fiber): boolean {
+  return candidate === target || candidate === target.alternate;
+}
+
+export function locateCurrent(start: Fiber, target: Fiber): LocatedFiber | null {
+  const ancestors: Fiber[] = [];
+  const visit = (node: Fiber): Fiber | null => {
+    if (isSameFiber(node, target)) {
+      return node;
+    }
+    ancestors.push(node);
+    let child = node.child;
+    while (child !== null) {
+      const found = visit(child);
+      if (found !== null) {
+        return found;
+      }
+      child = child.sibling;
+    }
+    ancestors.pop();
+    return null;
+  };
+  const fiber = visit(start);
+  return fiber === null ? null : { fiber, ancestors: [...ancestors] };
+}
+
+export function currentRootFiber(anchor: Fiber): Fiber | null {
+  const hostRoot = currentHostRoot(anchor);
+  if (hostRoot === null) {
+    return null;
+  }
+  return locateCurrent(hostRoot, anchor)?.fiber ?? null;
+}

package/src/fiber/narrow.ts

@@ -0,0 +1,15 @@
+export type UnknownRecord = Record<string, unknown>;
+
+export type UnknownFunction = (...args: unknown[]) => unknown;
+
+export function isRecord(value: unknown): value is UnknownRecord {
+  return typeof value === 'object' && value !== null;
+}
+
+export function isFunction(value: unknown): value is UnknownFunction {
+  return typeof value === 'function';
+}
+
+export function nonEmptyString(value: unknown): string | null {
+  return typeof value === 'string' && value.length > 0 ? value : null;
+}

package/src/fiber/reader.ts

@@ -0,0 +1,98 @@
+import { isRecord } from './narrow.ts';
+import { type Fiber, type FiberRoot, FiberTag, type Props } from './types.ts';
+
+const NO_PROPS: Props = {};
+
+interface NamedType {
+  displayName?: unknown;
+  name?: unknown;
+  render?: unknown;
+  type?: unknown;
+}
+
+export function propsOf(fiber: Fiber): Props {
+  const props = fiber.memoizedProps;
+  return isRecord(props) ? props : NO_PROPS;
+}
+
+export function childrenOf(fiber: Fiber): Fiber[] {
+  const children: Fiber[] = [];
+  let child = fiber.child;
+  while (child !== null) {
+    children.push(child);
+    child = child.sibling;
+  }
+  return children;
+}
+
+function nameOfType(type: unknown): string {
+  if (typeof type === 'string') {
+    return type;
+  }
+  if (typeof type !== 'function' && !isRecord(type)) {
+    return '';
+  }
+  const named = type as NamedType;
+  if (typeof named.displayName === 'string' && named.displayName.length > 0) {
+    return named.displayName;
+  }
+  if (typeof named.name === 'string' && named.name.length > 0) {
+    return named.name;
+  }
+  return '';
+}
+
+export function componentName(fiber: Fiber): string {
+  const direct = nameOfType(fiber.type);
+  if (direct.length > 0 || !isRecord(fiber.type)) {
+    return direct;
+  }
+  const wrapped = fiber.type as NamedType;
+  return nameOfType(wrapped.render) || nameOfType(wrapped.type);
+}
+
+export function isHostComponent(fiber: Fiber): boolean {
+  return fiber.tag === FiberTag.HostComponent;
+}
+
+export function isHostText(fiber: Fiber): boolean {
+  return fiber.tag === FiberTag.HostText;
+}
+
+export function hostRootOf(fiber: Fiber): Fiber | null {
+  let node: Fiber | null = fiber;
+  while (node !== null && node.tag !== FiberTag.HostRoot) {
+    node = node.return;
+  }
+  return node;
+}
+
+export function fiberRootOf(fiber: Fiber): FiberRoot | null {
+  const hostRoot = hostRootOf(fiber);
+  const root = hostRoot === null ? null : hostRoot.stateNode;
+  return isRecord(root) && 'current' in root ? (root as unknown as FiberRoot) : null;
+}
+
+export function currentHostRoot(fiber: Fiber): Fiber | null {
+  const hostRoot = hostRootOf(fiber);
+  if (hostRoot === null) {
+    return null;
+  }
+  const root = hostRoot.stateNode as FiberRoot | null;
+  return root !== null && isRecord(root) ? root.current : null;
+}
+
+export function firstHostDescendant(fiber: Fiber): Fiber | null {
+  if (isHostComponent(fiber)) {
+    return fiber;
+  }
+  let child = fiber.child;
+  while (child !== null) {
+    const host = firstHostDescendant(child);
+    if (host !== null) {
+      return host;
+    }
+    child = child.sibling;
+  }
+  return null;
+}

package/src/fiber/text.ts

@@ -0,0 +1,52 @@
+import { childrenOf, isHostText } from './reader.ts';
+import type { Fiber } from './types.ts';
+
+const PRIVATE_USE_GLYPHS = /[-\u{F0000}-\u{10FFFF}]/gu;
+
+export function normalizeText(value: string): string {
+  return value.replace(PRIVATE_USE_GLYPHS, '').replace(/\s+/g, ' ').trim();
+}
+
+export function collectText(fiber: Fiber, limit: number): string {
+  const parts: string[] = [];
+  let length = 0;
+  const visit = (node: Fiber): void => {
+    if (length >= limit) {
+      return;
+    }
+    if (isHostText(node)) {
+      const text = typeof node.memoizedProps === 'string' ? normalizeText(node.memoizedProps) : '';
+      if (text.length > 0) {
+        parts.push(text);
+        length += text.length + 1;
+      }
+      return;
+    }
+    for (const child of childrenOf(node)) {
+      visit(child);
+    }
+  };
+  visit(fiber);
+  return parts.join(' ');
+}
+
+export function precedingText(ancestors: Fiber[], fiber: Fiber, limit: number): string {
+  let branch = fiber;
+  for (let depth = ancestors.length - 1; depth >= Math.max(0, ancestors.length - 4); depth -= 1) {
+    const parent = ancestors[depth];
+    if (parent === undefined) {
+      break;
+    }
+    const siblings = childrenOf(parent);
+    const index = siblings.findIndex((sibling) => sibling === branch);
+    for (let position = index - 1; position >= 0; position -= 1) {
+      const sibling = siblings[position];
+      const text = sibling === undefined ? '' : collectText(sibling, limit);
+      if (text.length > 0) {
+        return text;
+      }
+    }
+    branch = parent;
+  }
+  return '';
+}

package/src/fiber/types.ts

@@ -0,0 +1,24 @@
+export type Props = Readonly<Record<string, unknown>>;
+
+export interface Fiber {
+  tag: number;
+  key: string | null;
+  type: unknown;
+  memoizedProps: unknown;
+  stateNode: unknown;
+  child: Fiber | null;
+  sibling: Fiber | null;
+  return: Fiber | null;
+  alternate: Fiber | null;
+}
+
+export interface FiberRoot {
+  current: Fiber;
+}
+
+export const FiberTag = {
+  ClassComponent: 1,
+  HostRoot: 3,
+  HostComponent: 5,
+  HostText: 6,
+} as const;

package/src/host/border-radius.ts

@@ -0,0 +1,11 @@
+import { isRecord } from '../fiber/narrow.ts';
+
+export function borderRadiusOf(style: unknown): number {
+  if (Array.isArray(style)) {
+    return style.reduce<number>((radius, entry) => {
+      const nested = borderRadiusOf(entry);
+      return nested > 0 ? nested : radius;
+    }, 0);
+  }
+  return isRecord(style) && typeof style.borderRadius === 'number' ? style.borderRadius : 0;
+}

package/src/host/instance.ts

@@ -0,0 +1,30 @@
+import { isFunction, isRecord } from '../fiber/narrow.ts';
+import type { Fiber } from '../fiber/types.ts';
+
+export type MeasureCallback = (x: number, y: number, width: number, height: number) => void;
+
+export interface HostInstance {
+  measureInWindow: (callback: MeasureCallback) => void;
+  setNativeProps?: (props: Record<string, unknown>) => void;
+  focus?: () => void;
+  blur?: () => void;
+}
+
+function isHostInstance(value: unknown): value is HostInstance {
+  return isRecord(value) && isFunction(value.measureInWindow);
+}
+
+export function hostInstanceOf(host: Fiber): HostInstance | null {
+  const node = host.stateNode;
+  if (isHostInstance(node)) {
+    return node;
+  }
+  if (!isRecord(node) || !isRecord(node.canonical)) {
+    return null;
+  }
+  const canonical = node.canonical;
+  if (isHostInstance(canonical.publicInstance)) {
+    return canonical.publicInstance;
+  }
+  return isHostInstance(canonical) ? canonical : null;
+}

package/src/host/measure.ts

@@ -0,0 +1,25 @@
+import type { Fiber } from '../fiber/types.ts';
+import { hostInstanceOf } from './instance.ts';
+import type { Rect } from './rect.ts';
+
+const MEASURE_TIMEOUT_MS = 400;
+
+export function measureHost(host: Fiber): Promise<Rect | null> {
+  const instance = hostInstanceOf(host);
+  if (instance === null) {
+    return Promise.resolve(null);
+  }
+  return new Promise((resolve) => {
+    const timer = setTimeout(() => resolve(null), MEASURE_TIMEOUT_MS);
+    try {
+      instance.measureInWindow((x, y, width, height) => {
+        clearTimeout(timer);
+        const finite = [x, y, width, height].every((value) => Number.isFinite(value));
+        resolve(finite ? { x, y, width, height } : null);
+      });
+    } catch {
+      clearTimeout(timer);
+      resolve(null);
+    }
+  });
+}

package/src/host/rect.ts

@@ -0,0 +1,45 @@
+export interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+export function intersects(first: Rect, second: Rect): boolean {
+  return (
+    first.x < second.x + second.width &&
+    first.x + first.width > second.x &&
+    first.y < second.y + second.height &&
+    first.y + first.height > second.y
+  );
+}
+
+export function isVisibleIn(rect: Rect, viewport: Size): boolean {
+  return rect.width > 0 && rect.height > 0 && intersects(rect, { x: 0, y: 0, ...viewport });
+}
+
+export function centerOf(rect: Rect): Point {
+  return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+}
+
+export interface Band {
+  top: number;
+  bottom: number;
+}
+
+export function scrollDeltaIntoBand(target: Rect, band: Band): number {
+  if (target.height > band.bottom - band.top) {
+    return target.y - band.top;
+  }
+  return target.y + target.height / 2 - (band.top + band.bottom) / 2;
+}

package/src/host/visible-area.ts

@@ -0,0 +1,5 @@
+import type { Size } from './rect.ts';
+
+export function visibleViewport(window: Size, keyboardHeight: number): Size {
+  return { width: window.width, height: Math.max(0, window.height - Math.max(0, keyboardHeight)) };
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export { BlarProvider } from './BlarProvider.tsx';
+export type { BlarProviderProps } from './BlarProvider.tsx';
+export { Blar } from './blar.ts';
+export type { ChatControls, MessageMetadataOptions } from './blar.ts';
+export type { ChatOptions, LauncherOptions } from './chat/options.ts';
+export type { Language, UiStringOverrides, UiStrings } from './ui/strings.ts';
+export type { NavigationRefLike } from './actions/navigation-driver.ts';
+export type { BlarIdentity, BlarIdentityProofInput, CustomFields } from './backend/identity.ts';
+export type { MessageMetadata } from './backend/message-metadata.ts';
+export { SDK_VERSION } from './version.ts';

package/src/nudge/NudgeBubble.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import type { LauncherPlacement } from '../chat/Launcher.tsx';
+import type { UiStrings } from '../ui/strings.ts';
+import { useInsets } from '../ui/useInsets.ts';
+import { initialsOf, type NudgeView } from './nudge.ts';
+
+export interface NudgeBubbleProps {
+  nudge: NudgeView;
+  strings: UiStrings;
+  color: string;
+  placement: LauncherPlacement;
+  launcherVisible: boolean;
+  onAccept: () => void;
+  onDecline: () => void;
+  onLater: () => void;
+}
+
+const LAUNCHER_SIZE = 56;
+const GAP = 12;
+
+export function NudgeBubble({ nudge, strings, color, placement, launcherVisible, onAccept, onDecline, onLater }: NudgeBubbleProps): React.JSX.Element {
+  const insets = useInsets();
+  const horizontal = placement.side === 'left' ? { left: placement.offsetX } : { right: placement.offsetX };
+  const lift = launcherVisible ? LAUNCHER_SIZE + GAP : 0;
+  return (
+    <View style={[styles.card, horizontal, { bottom: insets.bottom + placement.offsetY + lift }]} testID="blar-nudge-bubble">
+      <View style={styles.header}>
+        {nudge.sender === null ? null : <Avatar name={nudge.sender.name} url={nudge.sender.avatarUrl} color={color} />}
+        <View style={styles.headerText}>
+          {nudge.sender === null ? null : <Text style={styles.name}>{nudge.sender.name}</Text>}
+          {nudge.sender?.subtitle === null || nudge.sender === null ? null : <Text style={styles.subtitle}>{nudge.sender.subtitle}</Text>}
+        </View>
+        <Pressable accessibilityLabel={strings.nudgeDismiss} hitSlop={10} onPress={onDecline}>
+          <Text style={styles.close}>×</Text>
+        </Pressable>
+      </View>
+      <Text style={styles.message}>{nudge.bubbleMessage}</Text>
+      {nudge.progress === null ? null : <ProgressBar total={nudge.progress.total} completed={nudge.progress.completed} color={color} />}
+      {nudge.continuation ? (
+        <Pressable accessibilityRole="button" style={[styles.primary, { backgroundColor: color }]} onPress={onAccept}>
+          <Text style={styles.primaryText}>{nudge.ctaLabel ?? strings.nudgeAccept}</Text>
+        </Pressable>
+      ) : (
+        <View>
+          <Text style={styles.prompt}>{strings.nudgePrompt}</Text>
+          <View style={styles.actions}>
+            <Pressable accessibilityRole="button" style={[styles.primary, styles.action, { backgroundColor: color }]} onPress={onAccept}>
+              <Text style={styles.primaryText}>{strings.nudgeAccept}</Text>
+            </Pressable>
+            <Pressable accessibilityRole="button" style={[styles.secondary, styles.action]} onPress={onDecline}>
+              <Text style={styles.secondaryText}>{strings.nudgeDecline}</Text>
+            </Pressable>
+            <Pressable accessibilityRole="button" style={[styles.secondary, styles.action]} onPress={onLater}>
+              <Text style={styles.secondaryText}>{strings.nudgeLater}</Text>
+            </Pressable>
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}
+
+function Avatar({ name, url, color }: { name: string; url: string | null; color: string }): React.JSX.Element {
+  return url === null ? (
+    <View style={[styles.avatar, { backgroundColor: color }]}>
+      <Text style={styles.avatarText}>{initialsOf(name)}</Text>
+    </View>
+  ) : (
+    <Image source={{ uri: url }} style={styles.avatar} />
+  );
+}
+
+function ProgressBar({ total, completed, color }: { total: number; completed: number; color: string }): React.JSX.Element {
+  const segments = Array.from({ length: Math.max(0, total) }, (_, index) => index < completed);
+  return (
+    <View style={styles.progress}>
+      {segments.map((done, index) => (
+        <View key={index} style={[styles.segment, { backgroundColor: done ? color : '#e5e7eb' }]} />
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    position: 'absolute',
+    width: 300,
+    maxWidth: '90%',
+    backgroundColor: '#ffffff',
+    borderRadius: 16,
+    padding: 14,
+    gap: 10,
+    elevation: 10,
+    shadowColor: '#000000',
+    shadowOpacity: 0.25,
+    shadowRadius: 10,
+  },
+  header: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+  headerText: { flex: 1 },
+  avatar: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center' },
+  avatarText: { color: '#ffffff', fontWeight: '700' },
+  name: { fontWeight: '700', color: '#111827' },
+  subtitle: { color: '#6b7280', fontSize: 12 },
+  close: { fontSize: 22, color: '#9ca3af', lineHeight: 22 },
+  message: { color: '#111827', fontSize: 15 },
+  progress: { flexDirection: 'row', gap: 4 },
+  segment: { flex: 1, height: 4, borderRadius: 2 },
+  prompt: { color: '#374151', fontSize: 13, marginBottom: 6 },
+  actions: { flexDirection: 'row', gap: 8 },
+  action: { flex: 1 },
+  primary: { borderRadius: 10, paddingVertical: 10, alignItems: 'center' },
+  primaryText: { color: '#ffffff', fontWeight: '700' },
+  secondary: { borderRadius: 10, paddingVertical: 10, alignItems: 'center', backgroundColor: '#f3f4f6' },
+  secondaryText: { color: '#111827', fontWeight: '600' },
+});