@crafter/rn-ai-elements 0.0.1

package/src/streaming/StreamingMarkdown.tsx

@@ -0,0 +1,282 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { Linking, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import Markdown from 'react-native-markdown-display';
+import { useAIElementsTheme } from '../theme';
+import type { AIElementsTheme } from '../theme';
+
+/**
+ * Closes any dangling markdown constructs that the parser would otherwise
+ * mis-render mid-stream. Most importantly: an unclosed fenced code block
+ * causes everything after the opening ``` to be rendered as code until the
+ * closing fence arrives, which produces a jarring flicker.
+ *
+ * This is correctness, not animation — keep it even in the "simple" version.
+ */
+function stabilizePartialMarkdown(content: string): string {
+  const fenceMatches = content.match(/^```/gm);
+  const fenceCount = fenceMatches?.length ?? 0;
+  if (fenceCount % 2 === 1) {
+    const needsNewline = !content.endsWith('\n');
+    return `${content}${needsNewline ? '\n' : ''}\`\`\``;
+  }
+  return content;
+}
+
+export interface StreamingMarkdownProps {
+  /** The markdown string (may be partial while streaming). */
+  content: string;
+  /** Hint that content is still being appended. Default false. */
+  isStreaming?: boolean;
+  /**
+   * @deprecated No longer applied. The component now matches Vercel
+   * ai-elements' `MessageResponse` and performs no custom fade
+   * animation — content simply re-renders as it grows. Kept in the
+   * props for backwards compatibility so existing call sites don't
+   * break; safe to remove.
+   */
+  fadeDuration?: number;
+  /** Optional container style override. */
+  style?: StyleProp<ViewStyle>;
+}
+
+function createMarkdownStyles(theme: AIElementsTheme) {
+  return {
+    body: {
+      color: theme.colors.foreground,
+      fontSize: 12,
+      lineHeight: 12 * theme.typography.lineHeight.normal,
+      fontFamily: theme.typography.fontFamily,
+    },
+    heading1: {
+      color: theme.colors.foreground,
+      fontSize: theme.typography.fontSize['2xl'],
+      fontWeight: theme.typography.fontWeight.bold as '700',
+      lineHeight: theme.typography.fontSize['2xl'] * theme.typography.lineHeight.tight,
+      marginTop: theme.spacing.lg,
+      marginBottom: theme.spacing.md,
+    },
+    heading2: {
+      color: theme.colors.foreground,
+      fontSize: theme.typography.fontSize.xl,
+      fontWeight: theme.typography.fontWeight.bold as '700',
+      lineHeight: theme.typography.fontSize.xl * theme.typography.lineHeight.tight,
+      marginTop: theme.spacing.lg,
+      marginBottom: theme.spacing.sm,
+    },
+    heading3: {
+      color: theme.colors.foreground,
+      fontSize: theme.typography.fontSize.lg,
+      fontWeight: theme.typography.fontWeight.semibold as '600',
+      lineHeight: theme.typography.fontSize.lg * theme.typography.lineHeight.tight,
+      marginTop: theme.spacing.md,
+      marginBottom: theme.spacing.sm,
+    },
+    heading4: {
+      color: theme.colors.foreground,
+      fontSize: theme.typography.fontSize.md,
+      fontWeight: theme.typography.fontWeight.semibold as '600',
+      marginTop: theme.spacing.md,
+      marginBottom: theme.spacing.xs,
+    },
+    strong: {
+      fontWeight: theme.typography.fontWeight.bold as '700',
+    },
+    em: {
+      fontStyle: 'italic' as const,
+    },
+    link: {
+      color: theme.colors.primary,
+      textDecorationLine: 'underline' as const,
+    },
+    code_inline: {
+      backgroundColor: theme.colors.muted,
+      color: theme.colors.foreground,
+      fontFamily: theme.typography.monoFontFamily,
+      fontSize: theme.typography.fontSize.sm,
+      paddingHorizontal: 4,
+      paddingVertical: 2,
+      borderRadius: theme.radius.sm,
+    },
+    code_block: {
+      backgroundColor: theme.dark ? '#1E1E1E' : '#F8F8F8',
+      color: theme.colors.foreground,
+      fontFamily: theme.typography.monoFontFamily,
+      fontSize: theme.typography.fontSize.sm,
+      lineHeight: theme.typography.fontSize.sm * theme.typography.lineHeight.relaxed,
+      padding: theme.spacing.md,
+      borderRadius: theme.radius.md,
+      marginVertical: theme.spacing.sm,
+    },
+    fence: {
+      backgroundColor: theme.dark ? '#1E1E1E' : '#F8F8F8',
+      color: theme.colors.foreground,
+      fontFamily: theme.typography.monoFontFamily,
+      fontSize: theme.typography.fontSize.sm,
+      lineHeight: theme.typography.fontSize.sm * theme.typography.lineHeight.relaxed,
+      padding: theme.spacing.md,
+      borderRadius: theme.radius.md,
+      marginVertical: theme.spacing.sm,
+    },
+    blockquote: {
+      backgroundColor: theme.colors.muted,
+      borderLeftColor: theme.colors.border,
+      borderLeftWidth: 3,
+      paddingHorizontal: theme.spacing.md,
+      paddingVertical: theme.spacing.sm,
+      marginVertical: theme.spacing.sm,
+      borderRadius: theme.radius.sm,
+    },
+    bullet_list: {
+      marginVertical: theme.spacing.xs,
+    },
+    ordered_list: {
+      marginVertical: theme.spacing.xs,
+    },
+    list_item: {
+      flexDirection: 'row' as const,
+      marginVertical: 2,
+    },
+    bullet_list_icon: {
+      color: theme.colors.mutedForeground,
+      fontSize: theme.typography.fontSize.md,
+      lineHeight: theme.typography.fontSize.md * theme.typography.lineHeight.normal,
+      marginRight: theme.spacing.sm,
+    },
+    ordered_list_icon: {
+      color: theme.colors.mutedForeground,
+      fontSize: theme.typography.fontSize.md,
+      lineHeight: theme.typography.fontSize.md * theme.typography.lineHeight.normal,
+      marginRight: theme.spacing.sm,
+    },
+    table: {
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: theme.colors.border,
+      borderRadius: theme.radius.sm,
+      marginVertical: theme.spacing.sm,
+    },
+    thead: {
+      backgroundColor: theme.colors.muted,
+    },
+    th: {
+      padding: theme.spacing.sm,
+      borderRightWidth: StyleSheet.hairlineWidth,
+      borderColor: theme.colors.border,
+      fontWeight: theme.typography.fontWeight.semibold as '600',
+    },
+    tr: {
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderColor: theme.colors.border,
+    },
+    td: {
+      padding: theme.spacing.sm,
+      borderRightWidth: StyleSheet.hairlineWidth,
+      borderColor: theme.colors.border,
+    },
+    hr: {
+      backgroundColor: theme.colors.border,
+      height: 1,
+      marginVertical: theme.spacing.lg,
+    },
+    paragraph: {
+      marginVertical: theme.spacing.xs,
+    },
+    image: {
+      borderRadius: theme.radius.md,
+    },
+  };
+}
+
+type MarkdownStyles = ReturnType<typeof createMarkdownStyles>;
+
+interface MemoMarkdownProps {
+  content: string;
+  styles: MarkdownStyles;
+  onLinkPress: (url: string) => boolean;
+}
+
+/**
+ * Memoized markdown body. Re-renders only when the content string or theme
+ * styles change — mirroring the `memo(MessageResponse)` pattern that Vercel
+ * ai-elements uses around `Streamdown`
+ * (opensrc/.../vercel/ai-elements/packages/elements/src/message.tsx:326).
+ */
+const MemoMarkdown = memo(
+  ({ content, styles, onLinkPress }: MemoMarkdownProps) => (
+    <Markdown style={styles} mergeStyle onLinkPress={onLinkPress}>
+      {content}
+    </Markdown>
+  ),
+  (prev, next) =>
+    prev.content === next.content &&
+    prev.styles === next.styles &&
+    prev.onLinkPress === next.onLinkPress,
+);
+MemoMarkdown.displayName = 'MemoMarkdown';
+
+/**
+ * StreamingMarkdown — renders markdown content using react-native-markdown-display.
+ *
+ * Deliberately matches the simplicity of Vercel ai-elements'
+ * `MessageResponse` (a memoized wrapper around `Streamdown`): no custom
+ * fade animations, no block-level entrance effects, no opacity tricks,
+ * **no additional throttling**. Content re-renders as it grows and the
+ * visual "streaming" feel comes from the tokens arriving incrementally
+ * from the network.
+ *
+ * **Why no RAF throttling?** We used to throttle updates to ~60fps via
+ * `requestAnimationFrame` inside this component. That sounds good on
+ * paper but stacks badly with `useChat`'s own `experimental_throttle`:
+ * the two timers drift out of phase, and you end up seeing "first word,
+ * then the rest of the text all at once" on subsequent messages. Vercel
+ * ai-elements trusts `useChat` entirely and does the same — see
+ * `opensrc/.../vercel/ai-elements/packages/elements/src/message.tsx:326`.
+ * If you need to throttle the re-render rate, set
+ * `experimental_throttle: 25` (or whatever) on the `useChat` call. Don't
+ * layer a second throttler here.
+ *
+ * What IS preserved:
+ *  - `stabilizePartialMarkdown` — closes unclosed code fences mid-stream
+ *    so the parser doesn't swallow the rest of the message as code.
+ *    Pure correctness, not visual.
+ *  - `MemoMarkdown` — shallow-equal memoization so identical content
+ *    doesn't re-parse. Matches `memo(MessageResponse)` in ai-elements.
+ */
+export function StreamingMarkdown({
+  content,
+  isStreaming = false,
+  style,
+}: StreamingMarkdownProps) {
+  const theme = useAIElementsTheme();
+
+  const markdownStyles = useMemo(() => createMarkdownStyles(theme), [theme]);
+
+  const handleLinkPress = useCallback((url: string) => {
+    Linking.openURL(url).catch(() => {});
+    return false;
+  }, []);
+
+  const displayContent = useMemo(
+    () => (isStreaming ? stabilizePartialMarkdown(content) : content),
+    [content, isStreaming],
+  );
+
+  if (displayContent.length === 0) {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <MemoMarkdown
+        content={displayContent}
+        styles={markdownStyles}
+        onLinkPress={handleLinkPress}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexShrink: 1,
+  },
+});

package/src/streaming/index.ts

@@ -0,0 +1,2 @@
+export { StreamingMarkdown } from './StreamingMarkdown';
+export type { StreamingMarkdownProps } from './StreamingMarkdown';