@crafter/rn-ai-elements 0.0.1

package/src/chatbot/ChatErrorBoundary.tsx

@@ -0,0 +1,230 @@
+import React, { Component, type ReactNode } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { RotateCcw } from 'lucide-react-native';
+import { useAIElementsTheme, type AIElementsTheme } from '../theme';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface ChatErrorBoundaryProps {
+  /** The protected subtree. Errors thrown during render are caught here. */
+  children: ReactNode;
+  /**
+   * Optional custom fallback. Receives the caught error and a reset
+   * callback that clears the boundary back to the children.
+   */
+  fallback?: (error: Error, reset: () => void) => ReactNode;
+  /**
+   * Called once when the boundary catches an error. Useful for forwarding
+   * to crash reporting (Sentry, Bugsnag, etc).
+   */
+  onError?: (error: Error, errorInfo: { componentStack: string }) => void;
+  /**
+   * When any value in this array changes between renders, the boundary
+   * automatically resets. Use this for cases like "the user navigated to a
+   * new message id" — re-rendering with a different id should clear a
+   * previously caught error.
+   */
+  resetKeys?: ReadonlyArray<unknown>;
+}
+
+interface ChatErrorBoundaryState {
+  error: Error | null;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function arraysShallowEqual(
+  a: ReadonlyArray<unknown> | undefined,
+  b: ReadonlyArray<unknown> | undefined,
+): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+
+// ---------------------------------------------------------------------------
+// Error boundary
+// ---------------------------------------------------------------------------
+
+/**
+ * Class-component boundary that wraps individual chat messages. If a single
+ * message's render throws (e.g. malformed markdown, a tool call with bad
+ * JSON), only that bubble shows a fallback — the rest of the conversation
+ * keeps working.
+ *
+ * React doesn't expose hooks for error boundaries, so this **must** stay a
+ * class component. The themed fallback is delegated to a sibling functional
+ * component so it can read the theme via hooks.
+ *
+ * @example
+ * ```tsx
+ * <ChatErrorBoundary resetKeys={[message.id]}>
+ *   <MessageRenderer message={message} />
+ * </ChatErrorBoundary>
+ * ```
+ */
+export class ChatErrorBoundary extends Component<
+  ChatErrorBoundaryProps,
+  ChatErrorBoundaryState
+> {
+  static displayName = 'ChatErrorBoundary';
+
+  state: ChatErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error): ChatErrorBoundaryState {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: { componentStack: string }) {
+    this.props.onError?.(error, errorInfo);
+    if (__DEV__) {
+      // Format following Expo's what / why / how convention so the warning
+      // tells you exactly what to fix instead of just dumping a stack.
+      console.warn(
+        '[chat-components] A message render threw inside <ChatErrorBoundary>.\n' +
+          `  what: ${error.message || 'unknown render error'}\n` +
+          '  why:  React unmounted that subtree to prevent a crash.\n' +
+          '  how:  inspect the message payload (markdown / tool args / sources)\n' +
+          '        below for invalid input. The user can also tap "Retry" to remount.',
+      );
+      console.error('[chat-components]', error, errorInfo.componentStack);
+    }
+  }
+
+  componentDidUpdate(prev: ChatErrorBoundaryProps) {
+    // Auto-reset if any reset key changed since the last render. This lets
+    // callers say "the message id changed, so any error from the previous
+    // message no longer applies".
+    if (
+      this.state.error &&
+      !arraysShallowEqual(prev.resetKeys, this.props.resetKeys)
+    ) {
+      this.reset();
+    }
+  }
+
+  reset = () => {
+    this.setState({ error: null });
+  };
+
+  render() {
+    const { error } = this.state;
+    if (error) {
+      if (this.props.fallback) {
+        return this.props.fallback(error, this.reset);
+      }
+      return <DefaultFallback error={error} onReset={this.reset} />;
+    }
+    return this.props.children;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Default themed fallback
+// ---------------------------------------------------------------------------
+
+interface DefaultFallbackProps {
+  error: Error;
+  onReset: () => void;
+}
+
+function DefaultFallback({ error, onReset }: DefaultFallbackProps) {
+  const theme = useAIElementsTheme();
+  const styles = getStyles(theme);
+
+  return (
+    <View
+      style={styles.wrapper}
+      accessible
+      accessibilityRole="alert"
+      accessibilityLabel="Message failed to render"
+    >
+      <View style={styles.bubble}>
+        <Text style={styles.title}>Couldn't render this message</Text>
+        <Text style={styles.message} numberOfLines={2}>
+          {error.message || 'Unknown render error.'}
+        </Text>
+        <Pressable
+          onPress={onReset}
+          accessibilityRole="button"
+          accessibilityLabel="Retry rendering this message"
+          hitSlop={8}
+          style={({ pressed }) => [
+            styles.retryButton,
+            pressed && styles.retryButtonPressed,
+          ]}
+        >
+          <RotateCcw size={12} color={theme.colors.foreground} />
+          <Text style={styles.retryText}>Retry</Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+DefaultFallback.displayName = 'ChatErrorBoundary.DefaultFallback';
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+function getStyles(theme: AIElementsTheme) {
+  return StyleSheet.create({
+    wrapper: {
+      alignItems: 'flex-start',
+      paddingHorizontal: theme.spacing.lg,
+      marginBottom: theme.spacing.md,
+    },
+    bubble: {
+      backgroundColor: theme.colors.muted,
+      borderColor: theme.colors.border,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderRadius: theme.radius.md,
+      paddingHorizontal: theme.spacing.md,
+      paddingVertical: theme.spacing.sm,
+      maxWidth: '88%',
+    },
+    title: {
+      color: theme.colors.foreground,
+      fontFamily: theme.typography.fontFamily,
+      fontSize: theme.typography.fontSize.sm,
+      fontWeight: theme.typography.fontWeight.semibold as '600',
+      marginBottom: 2,
+    },
+    message: {
+      color: theme.colors.mutedForeground,
+      fontFamily: theme.typography.fontFamily,
+      fontSize: theme.typography.fontSize.sm,
+      lineHeight:
+        theme.typography.fontSize.sm * theme.typography.lineHeight.normal,
+      marginBottom: theme.spacing.sm,
+    },
+    retryButton: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 6,
+      alignSelf: 'flex-start',
+      paddingHorizontal: theme.spacing.sm,
+      paddingVertical: 4,
+      borderRadius: theme.radius.sm,
+      backgroundColor: theme.colors.secondary,
+    },
+    retryButtonPressed: {
+      opacity: 0.7,
+    },
+    retryText: {
+      color: theme.colors.foreground,
+      fontFamily: theme.typography.fontFamily,
+      fontSize: theme.typography.fontSize.sm,
+      fontWeight: theme.typography.fontWeight.medium as '500',
+    },
+  });
+}

package/src/chatbot/ChatMessageItem.tsx

@@ -0,0 +1,195 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useAIElementsTheme } from '../theme';
+import { StreamingMarkdown } from '../streaming';
+import { Message, MessageContent } from './Message';
+import { Reasoning } from './Reasoning';
+import { Tool } from './Tool';
+import { Sources } from './Sources';
+import type { ChatMessageData } from './types';
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface ChatMessageItemProps {
+  /**
+   * The message to render, in the canonical {@link ChatMessageData} shape.
+   * Map your own message type to this shape inside `renderMessage`.
+   */
+  item: ChatMessageData;
+  /**
+   * @deprecated No longer applied — `StreamingMarkdown` matches Vercel
+   * ai-elements' `memo(Streamdown)` pattern and performs no custom fade
+   * animation. Kept in the props for backwards compatibility so existing
+   * call sites don't break; safe to remove.
+   */
+  fadeDuration?: number;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * Renders a single chat message — either a user bubble (delegated to the
+ * library's `Message` compound) or an assistant block composed of optional
+ * reasoning, tool call, streaming markdown, and sources.
+ *
+ * Wrapped in `React.memo` with a custom equality function below: rows only
+ * re-render when their own `item` content actually changes, **not** when an
+ * unrelated message updates elsewhere in the list. The equality function
+ * compares fields directly so callers can safely build a fresh
+ * `ChatMessageData` object on every render — identity churn is fine.
+ *
+ * @example
+ * ```tsx
+ * const renderMessage = useCallback(
+ *   (raw: MyMessage) => {
+ *     const data: ChatMessageData = toChatMessageData(raw);
+ *     return <ChatMessageItem item={data} />;
+ *   },
+ *   [],
+ * );
+ * ```
+ */
+function ChatMessageItemImpl({ item }: ChatMessageItemProps) {
+  const theme = useAIElementsTheme();
+  const isUser = item.role === 'user';
+
+  if (isUser) {
+    // Library's Message compound owns padding + bubble layout for user msgs.
+    // We pass the canonical data through — `Message` only reads `id`, `role`
+    // and `content`, all of which are present.
+    return (
+      <Message message={item}>
+        <MessageContent />
+      </Message>
+    );
+  }
+
+  // Assistant message — composed from optional sub-blocks.
+  return (
+    <View
+      style={[
+        styles.assistantBlock,
+        {
+          paddingHorizontal: theme.spacing.lg,
+          marginBottom: theme.spacing.md,
+        },
+      ]}
+    >
+      {item.reasoning && (
+        <Reasoning
+          content={item.reasoning.content}
+          isStreaming={item.reasoning.isStreaming}
+          // Collapsed by default — the trigger ("Thinking..." → "Thought
+          // for Xs") still shows progress; the user can tap to expand.
+          defaultOpen={false}
+          style={{ marginBottom: theme.spacing.sm }}
+        />
+      )}
+
+      {item.tool && (
+        <Tool
+          name={item.tool.name}
+          status={item.tool.status}
+          args={item.tool.args}
+          result={item.tool.result}
+          style={{ marginBottom: theme.spacing.sm }}
+        />
+      )}
+
+      {item.content.length > 0 && (
+        <StreamingMarkdown
+          content={item.content}
+          // Once sources are attached we treat the message as fully
+          // delivered and the streaming hint switches off.
+          isStreaming={!item.sources}
+        />
+      )}
+
+      {item.sources && item.sources.length > 0 && (
+        <Sources
+          sources={item.sources}
+          style={{ marginTop: theme.spacing.sm }}
+        />
+      )}
+    </View>
+  );
+}
+
+ChatMessageItemImpl.displayName = 'ChatMessageItem';
+
+// ---------------------------------------------------------------------------
+// Custom equality — only re-render when something we actually display changes
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns true when the two prop sets would render identical output. Compares
+ * fields directly so a freshly-built `ChatMessageData` object on every render
+ * is fine — only real content changes trigger a re-render.
+ */
+function areEqual(
+  prev: ChatMessageItemProps,
+  next: ChatMessageItemProps,
+): boolean {
+  const a = prev.item;
+  const b = next.item;
+  if (a === b) return true;
+
+  // Identity / role
+  if (a.id !== b.id) return false;
+  if (a.role !== b.role) return false;
+
+  // Content (the streaming hot path — must be cheap)
+  if (a.content !== b.content) return false;
+
+  // Reasoning (object — compare relevant fields, not identity)
+  const ar = a.reasoning;
+  const br = b.reasoning;
+  if (ar !== br) {
+    if (!ar || !br) return false;
+    if (ar.content !== br.content) return false;
+    if (ar.isStreaming !== br.isStreaming) return false;
+  }
+
+  // Tool — name + status + result are the animating fields. Args are
+  // assumed stable per invocation, so we don't deep-compare them.
+  const at = a.tool;
+  const bt = b.tool;
+  if (at !== bt) {
+    if (!at || !bt) return false;
+    if (at.name !== bt.name) return false;
+    if (at.status !== bt.status) return false;
+    if (at.result !== bt.result) return false;
+  }
+
+  // Sources — the typical pattern is to attach the array once at the end
+  // of the stream and never mutate it, so a length comparison is enough.
+  const as = a.sources;
+  const bs = b.sources;
+  if (as !== bs) {
+    if ((as?.length ?? 0) !== (bs?.length ?? 0)) return false;
+  }
+
+  return true;
+}
+
+export const ChatMessageItem = React.memo(ChatMessageItemImpl, areEqual);
+
+// `React.memo` doesn't propagate `displayName` from the inner function, set
+// it on the wrapped export so DevTools shows a meaningful name.
+ChatMessageItem.displayName = 'ChatMessageItem';
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  assistantBlock: {
+    // Default `alignItems: stretch` so children (Reasoning, Tool,
+    // StreamingMarkdown, Sources) span the full available width instead
+    // of shrinking to intrinsic content size.
+  },
+});