@crafter/rn-ai-elements 0.0.1

package/src/chatbot/Reasoning.tsx

@@ -0,0 +1,198 @@
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { Brain, ChevronDown } from 'lucide-react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import { useAIElementsTheme } from '../theme';
+import { useCollapsible } from '../hooks';
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from '../primitives';
+import { StreamingMarkdown } from '../streaming/StreamingMarkdown';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface ReasoningProps {
+  content: string;
+  isStreaming?: boolean;
+  defaultOpen?: boolean;
+  /** Override the trigger label. Defaults to "Thinking..." / "Thought for Xs". */
+  title?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+// ---------------------------------------------------------------------------
+// Constants — match the Vercel ai-elements reference
+// ---------------------------------------------------------------------------
+
+const MS_IN_S = 1000;
+const SHIMMER_DURATION_MS = 1200;
+
+// ---------------------------------------------------------------------------
+// Pulsing "Thinking..." text — mirrors the <Shimmer> the web reference uses
+// ---------------------------------------------------------------------------
+
+function ThinkingShimmer({ style }: { style: TextStyle }) {
+  const opacity = useSharedValue(1);
+
+  useEffect(() => {
+    opacity.value = withRepeat(
+      withTiming(0.4, { duration: SHIMMER_DURATION_MS }),
+      -1,
+      true,
+    );
+  }, [opacity]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  return (
+    <Animated.Text style={[style, animatedStyle as any]}>
+      Thinking...
+    </Animated.Text>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function ReasoningComponent({
+  content,
+  isStreaming = false,
+  defaultOpen = false,
+  title,
+  style,
+}: ReasoningProps) {
+  const theme = useAIElementsTheme();
+
+  // The component starts collapsed (and stays collapsed) by default. The
+  // user must tap the trigger to expand. Pass `defaultOpen` to override.
+  const { isOpen, toggle } = useCollapsible({ defaultOpen });
+
+  // --- duration tracking --------------------------------------------------
+  const startTimeRef = useRef<number | null>(null);
+  const [duration, setDuration] = useState<number | undefined>(undefined);
+
+  useEffect(() => {
+    if (isStreaming) {
+      if (startTimeRef.current === null) {
+        startTimeRef.current = Date.now();
+      }
+    } else if (startTimeRef.current !== null) {
+      setDuration(Math.ceil((Date.now() - startTimeRef.current) / MS_IN_S));
+      startTimeRef.current = null;
+    }
+  }, [isStreaming]);
+
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (next !== isOpen) {
+        toggle();
+      }
+    },
+    [isOpen, toggle],
+  );
+
+  // --- styles -------------------------------------------------------------
+  const triggerTextStyle: TextStyle = {
+    color: theme.colors.mutedForeground,
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.medium as TextStyle['fontWeight'],
+    fontFamily: theme.typography.fontFamily,
+  };
+
+  // --- trigger label ------------------------------------------------------
+  const renderTriggerLabel = () => {
+    if (title) {
+      return <Text style={triggerTextStyle}>{title}</Text>;
+    }
+    if (isStreaming || duration === 0) {
+      return <ThinkingShimmer style={triggerTextStyle} />;
+    }
+    if (duration === undefined) {
+      return <Text style={triggerTextStyle}>Thought for a few seconds</Text>;
+    }
+    return <Text style={triggerTextStyle}>Thought for {duration} seconds</Text>;
+  };
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={handleOpenChange} style={style}>
+      <CollapsibleTrigger>
+        <View
+          style={[
+            styles.trigger,
+            {
+              gap: theme.spacing.sm,
+              paddingVertical: theme.spacing.xs,
+            },
+          ]}
+        >
+          <Brain size={16} color={theme.colors.mutedForeground} />
+          {renderTriggerLabel()}
+          <ChevronDown
+            size={14}
+            color={theme.colors.mutedForeground}
+            style={{
+              transform: [{ rotate: isOpen ? '180deg' : '0deg' }],
+              marginLeft: 4,
+            }}
+          />
+        </View>
+      </CollapsibleTrigger>
+
+      <CollapsibleContent>
+        <View
+          style={[
+            styles.content,
+            {
+              paddingHorizontal: theme.spacing.md,
+              paddingVertical: theme.spacing.sm,
+              borderLeftColor: theme.colors.border,
+            },
+          ]}
+        >
+          <StreamingMarkdown content={content} isStreaming={isStreaming} />
+        </View>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  content: {
+    borderLeftWidth: 2,
+    marginLeft: 8,
+    marginTop: 4,
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Export
+// ---------------------------------------------------------------------------
+
+export const Reasoning = memo(ReasoningComponent);

package/src/chatbot/Shimmer.tsx

@@ -0,0 +1,146 @@
+import React, { memo, useEffect } from 'react';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+import { useAIElementsTheme } from '../theme';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface ShimmerProps {
+  width?: number | string;
+  height?: number;
+  borderRadius?: number;
+  style?: StyleProp<ViewStyle>;
+  lines?: number;
+}
+
+// ---------------------------------------------------------------------------
+// Single shimmer bar
+// ---------------------------------------------------------------------------
+
+const LINE_WIDTHS = ['100%', '92%', '76%', '85%', '60%'] as const;
+const DEFAULT_HEIGHT = 14;
+const ANIMATION_DURATION = 1200;
+
+interface ShimmerBarProps {
+  width: number | string;
+  height: number;
+  borderRadius: number;
+  backgroundColor: string;
+  delay: number;
+}
+
+function ShimmerBar({
+  width,
+  height,
+  borderRadius,
+  backgroundColor,
+  delay,
+}: ShimmerBarProps) {
+  const opacity = useSharedValue(0.3);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      opacity.value = withRepeat(
+        withTiming(1, { duration: ANIMATION_DURATION, easing: Easing.inOut(Easing.ease) }),
+        -1,
+        true,
+      );
+    }, delay);
+
+    return () => clearTimeout(timer);
+  }, [opacity, delay]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width: width as any,
+          height,
+          borderRadius,
+          backgroundColor,
+        },
+        animatedStyle as any,
+      ]}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function ShimmerComponent({
+  width: customWidth,
+  height: customHeight,
+  borderRadius: customBorderRadius,
+  style,
+  lines = 1,
+}: ShimmerProps) {
+  const theme = useAIElementsTheme();
+  const defaultBorderRadius = theme.radius.sm;
+  const barHeight = customHeight ?? DEFAULT_HEIGHT;
+  const barBorderRadius = customBorderRadius ?? defaultBorderRadius;
+  const bgColor = theme.colors.muted;
+
+  if (lines <= 1) {
+    return (
+      <View style={style}>
+        <ShimmerBar
+          width={customWidth ?? '100%'}
+          height={barHeight}
+          borderRadius={barBorderRadius}
+          backgroundColor={bgColor}
+          delay={0}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.multiline, { gap: theme.spacing.sm }, style]}>
+      {Array.from({ length: lines }).map((_, index) => {
+        const lineWidth =
+          customWidth ?? LINE_WIDTHS[index % LINE_WIDTHS.length];
+
+        return (
+          <ShimmerBar
+            key={index}
+            width={lineWidth}
+            height={barHeight}
+            borderRadius={barBorderRadius}
+            backgroundColor={bgColor}
+            delay={index * 150}
+          />
+        );
+      })}
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  multiline: {
+    flexDirection: 'column',
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Export
+// ---------------------------------------------------------------------------
+
+export const Shimmer = memo(ShimmerComponent);

package/src/chatbot/Sources.tsx

@@ -0,0 +1,263 @@
+import React, { memo, useCallback } from 'react';
+import {
+  Image,
+  Linking,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { ExternalLink, Globe } from 'lucide-react-native';
+import { useAIElementsTheme } from '../theme';
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from '../primitives';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface Source {
+  title: string;
+  url: string;
+  description?: string;
+  favicon?: string;
+}
+
+export interface SourcesProps {
+  sources: Source[];
+  maxVisible?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+// ---------------------------------------------------------------------------
+// Single source row
+// ---------------------------------------------------------------------------
+
+interface SourceRowProps {
+  source: Source;
+}
+
+function SourceRow({ source }: SourceRowProps) {
+  const theme = useAIElementsTheme();
+
+  const handlePress = useCallback(() => {
+    Linking.openURL(source.url).catch(() => {
+      // silently ignore if URL cannot be opened
+    });
+  }, [source.url]);
+
+  const titleStyle: TextStyle = {
+    color: theme.colors.foreground,
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.medium as TextStyle['fontWeight'],
+    fontFamily: theme.typography.fontFamily,
+  };
+
+  const urlStyle: TextStyle = {
+    color: theme.colors.mutedForeground,
+    fontSize: theme.typography.fontSize.xs,
+    fontFamily: theme.typography.fontFamily,
+  };
+
+  const hostname = getHostname(source.url);
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      style={({ pressed }) => [
+        styles.sourceRow,
+        {
+          backgroundColor: pressed ? theme.colors.muted : 'transparent',
+          borderRadius: theme.radius.md,
+          padding: theme.spacing.md,
+          gap: theme.spacing.md,
+        },
+      ]}
+    >
+      <View style={styles.faviconContainer}>
+        {source.favicon ? (
+          <Image
+            source={{ uri: source.favicon }}
+            style={[
+              styles.favicon,
+              { borderRadius: theme.radius.sm },
+            ]}
+          />
+        ) : (
+          <View
+            style={[
+              styles.faviconPlaceholder,
+              {
+                backgroundColor: theme.colors.muted,
+                borderRadius: theme.radius.sm,
+              },
+            ]}
+          >
+            <Globe size={14} color={theme.colors.mutedForeground} />
+          </View>
+        )}
+      </View>
+
+      <View style={styles.sourceInfo}>
+        <Text style={titleStyle} numberOfLines={1}>
+          {source.title}
+        </Text>
+        <Text style={urlStyle} numberOfLines={1}>
+          {hostname}
+        </Text>
+      </View>
+
+      <ExternalLink
+        size={14}
+        color={theme.colors.mutedForeground}
+      />
+    </Pressable>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function SourcesComponent({
+  sources,
+  maxVisible,
+  style,
+}: SourcesProps) {
+  const theme = useAIElementsTheme();
+
+  if (sources.length === 0) {
+    return null;
+  }
+
+  const visibleSources = maxVisible
+    ? sources.slice(0, maxVisible)
+    : sources;
+
+  const triggerTextStyle: TextStyle = {
+    color: theme.colors.mutedForeground,
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.medium as TextStyle['fontWeight'],
+    fontFamily: theme.typography.fontFamily,
+  };
+
+  return (
+    <Collapsible style={style}>
+      <CollapsibleTrigger>
+        <View
+          style={[
+            styles.trigger,
+            {
+              backgroundColor: theme.colors.muted,
+              borderRadius: theme.radius.md,
+              paddingHorizontal: theme.spacing.md,
+              paddingVertical: theme.spacing.sm,
+              gap: theme.spacing.sm,
+            },
+          ]}
+        >
+          <Globe size={16} color={theme.colors.mutedForeground} />
+          <Text style={triggerTextStyle}>
+            {sources.length} {sources.length === 1 ? 'source' : 'sources'}
+          </Text>
+        </View>
+      </CollapsibleTrigger>
+
+      <CollapsibleContent>
+        <View
+          style={[
+            styles.list,
+            {
+              marginTop: theme.spacing.xs,
+              borderColor: theme.colors.border,
+              borderRadius: theme.radius.md,
+            },
+          ]}
+        >
+          {visibleSources.map((source, index) => (
+            <View key={`${source.url}-${index}`}>
+              {index > 0 && (
+                <View
+                  style={[
+                    styles.divider,
+                    { backgroundColor: theme.colors.border },
+                  ]}
+                />
+              )}
+              <SourceRow source={source} />
+            </View>
+          ))}
+        </View>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Extract a hostname from a URL string without depending on the DOM `URL`
+ * constructor (whose type isn't available in the package's RN tsconfig).
+ * Handles protocol-less URLs, basic auth, and `:port` suffixes; strips a
+ * leading `www.` for display.
+ */
+function getHostname(url: string): string {
+  const match = url.match(/^(?:[a-z][a-z0-9+.-]*:\/\/)?(?:[^@/]*@)?([^:/?#]+)/i);
+  return (match?.[1] ?? url).replace(/^www\./, '');
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+  },
+  list: {
+    borderWidth: StyleSheet.hairlineWidth,
+    overflow: 'hidden',
+  },
+  sourceRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  faviconContainer: {
+    width: 24,
+    height: 24,
+  },
+  favicon: {
+    width: 24,
+    height: 24,
+  },
+  faviconPlaceholder: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  sourceInfo: {
+    flex: 1,
+    gap: 2,
+  },
+  divider: {
+    height: StyleSheet.hairlineWidth,
+    marginHorizontal: 12,
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Export
+// ---------------------------------------------------------------------------
+
+export const Sources = memo(SourcesComponent);