@crafter/rn-ai-elements 0.0.1

package/src/chatbot/Suggestion.tsx

@@ -0,0 +1,123 @@
+import React, { memo, useCallback } from 'react';
+import {
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { useAIElementsTheme } from '../theme';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface SuggestionItem {
+  label: string;
+  value?: string;
+}
+
+export interface SuggestionProps {
+  suggestions: SuggestionItem[];
+  onSelect: (value: string) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+// ---------------------------------------------------------------------------
+// Chip
+// ---------------------------------------------------------------------------
+
+interface ChipProps {
+  item: SuggestionItem;
+  onPress: (value: string) => void;
+}
+
+function Chip({ item, onPress }: ChipProps) {
+  const theme = useAIElementsTheme();
+
+  const handlePress = useCallback(() => {
+    onPress(item.value ?? item.label);
+  }, [item, onPress]);
+
+  const textStyle: TextStyle = {
+    color: theme.colors.foreground,
+    fontSize: theme.typography.fontSize.sm,
+    fontFamily: theme.typography.fontFamily,
+    fontWeight: theme.typography.fontWeight.medium as TextStyle['fontWeight'],
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      style={({ pressed }) => [
+        styles.chip,
+        {
+          borderColor: theme.colors.border,
+          borderRadius: theme.radius.full,
+          paddingHorizontal: theme.spacing.lg,
+          paddingVertical: theme.spacing.sm,
+          backgroundColor: pressed ? theme.colors.muted : theme.colors.background,
+        },
+      ]}
+    >
+      <Text style={textStyle}>{item.label}</Text>
+    </Pressable>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+function SuggestionComponent({
+  suggestions,
+  onSelect,
+  style,
+}: SuggestionProps) {
+  const theme = useAIElementsTheme();
+
+  if (suggestions.length === 0) {
+    return null;
+  }
+
+  return (
+    <ScrollView
+      horizontal
+      showsHorizontalScrollIndicator={false}
+      contentContainerStyle={[
+        styles.container,
+        {
+          paddingHorizontal: theme.spacing.lg,
+          gap: theme.spacing.sm,
+        },
+      ]}
+      style={style}
+    >
+      {suggestions.map((item, index) => (
+        <Chip key={`${item.label}-${index}`} item={item} onPress={onSelect} />
+      ))}
+    </ScrollView>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  chip: {
+    borderWidth: 1,
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Export
+// ---------------------------------------------------------------------------
+
+export const Suggestion = memo(SuggestionComponent);

package/src/chatbot/Tool.tsx

@@ -0,0 +1,340 @@
+import React, { createContext, memo, useContext, type ReactNode } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import {
+  CheckCircle,
+  Loader,
+  AlertCircle,
+  Clock,
+  Wrench,
+} from 'lucide-react-native';
+import { useAIElementsTheme } from '../theme';
+import type { AIElementsTheme } from '../theme';
+import { Badge, type BadgeVariant } from '../primitives';
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from '../primitives';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export type ToolStatus = 'pending' | 'running' | 'completed' | 'failed';
+
+export interface ToolProps {
+  name: string;
+  status: ToolStatus;
+  args?: Record<string, any>;
+  result?: string;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+interface ToolContextValue {
+  name: string;
+  status: ToolStatus;
+  args?: Record<string, any>;
+  result?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+const ToolContext = createContext<ToolContextValue | null>(null);
+
+function useToolContext(): ToolContextValue {
+  const ctx = useContext(ToolContext);
+  if (!ctx) {
+    throw new Error(
+      'Tool compound components must be used within a <Tool>.',
+    );
+  }
+  return ctx;
+}
+
+// ---------------------------------------------------------------------------
+// Status helpers
+// ---------------------------------------------------------------------------
+
+function getStatusBadgeVariant(status: ToolStatus): BadgeVariant {
+  switch (status) {
+    case 'pending':
+      return 'secondary';
+    case 'running':
+      return 'warning';
+    case 'completed':
+      return 'success';
+    case 'failed':
+      return 'destructive';
+  }
+}
+
+function getStatusIcon(status: ToolStatus, theme: AIElementsTheme) {
+  const size = 14;
+
+  switch (status) {
+    case 'pending':
+      return <Clock size={size} color={theme.colors.mutedForeground} />;
+    case 'running':
+      return <Loader size={size} color={theme.colors.warning} />;
+    case 'completed':
+      return <CheckCircle size={size} color={theme.colors.success} />;
+    case 'failed':
+      return <AlertCircle size={size} color={theme.colors.destructive} />;
+  }
+}
+
+function getStatusLabel(status: ToolStatus): string {
+  switch (status) {
+    case 'pending':
+      return 'Pending';
+    case 'running':
+      return 'Running';
+    case 'completed':
+      return 'Completed';
+    case 'failed':
+      return 'Failed';
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Tool (root)
+// ---------------------------------------------------------------------------
+
+function ToolRoot({ name, status, args, result, children, style }: ToolProps) {
+  const theme = useAIElementsTheme();
+
+  return (
+    <ToolContext.Provider value={{ name, status, args, result }}>
+      <View
+        style={[
+          styles.container,
+          {
+            backgroundColor: theme.colors.card,
+            borderColor: theme.colors.border,
+            borderRadius: theme.radius.md,
+            padding: theme.spacing.md,
+          },
+          style,
+        ]}
+      >
+        {children ?? (
+          <>
+            <ToolHeader />
+            {args && Object.keys(args).length > 0 && <ToolArgs />}
+            {result && <ToolResult />}
+          </>
+        )}
+      </View>
+    </ToolContext.Provider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ToolHeader
+// ---------------------------------------------------------------------------
+
+export interface ToolHeaderProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+function ToolHeaderComponent({ style }: ToolHeaderProps) {
+  const theme = useAIElementsTheme();
+  const { name, status } = useToolContext();
+
+  const nameStyle: TextStyle = {
+    color: theme.colors.foreground,
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.semibold as TextStyle['fontWeight'],
+    fontFamily: theme.typography.fontFamily,
+  };
+
+  return (
+    <View style={[styles.header, { gap: theme.spacing.sm }, style]}>
+      <Wrench size={16} color={theme.colors.mutedForeground} />
+      <Text style={nameStyle} numberOfLines={1}>
+        {name}
+      </Text>
+      <Badge variant={getStatusBadgeVariant(status)}>
+        <View style={[styles.badgeContent, { gap: theme.spacing.xs }]}>
+          {getStatusIcon(status, theme)}
+          <Text
+            style={{
+              color:
+                status === 'completed'
+                  ? theme.colors.successForeground
+                  : status === 'failed'
+                    ? theme.colors.destructiveForeground
+                    : status === 'running'
+                      ? theme.colors.warningForeground
+                      : theme.colors.secondaryForeground,
+              fontSize: theme.typography.fontSize.xs,
+              fontWeight: theme.typography.fontWeight
+                .semibold as TextStyle['fontWeight'],
+              fontFamily: theme.typography.fontFamily,
+              // Pin the text's line box to the 14px icon height so
+              // `alignItems: center` in the row produces pixel-aligned
+              // cross-axis centering between glyph and icon.
+              lineHeight: 14,
+              includeFontPadding: false,
+              textAlignVertical: 'center',
+            }}
+          >
+            {getStatusLabel(status)}
+          </Text>
+        </View>
+      </Badge>
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ToolArgs
+// ---------------------------------------------------------------------------
+
+export interface ToolArgsProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+function ToolArgsComponent({ style }: ToolArgsProps) {
+  const theme = useAIElementsTheme();
+  const { args } = useToolContext();
+
+  if (!args || Object.keys(args).length === 0) {
+    return null;
+  }
+
+  const labelStyle: TextStyle = {
+    color: theme.colors.mutedForeground,
+    fontSize: theme.typography.fontSize.xs,
+    fontWeight: theme.typography.fontWeight.medium as TextStyle['fontWeight'],
+    fontFamily: theme.typography.fontFamily,
+  };
+
+  const codeStyle: TextStyle = {
+    color: theme.colors.foreground,
+    fontSize: theme.typography.fontSize.xs,
+    fontFamily: theme.typography.monoFontFamily,
+    lineHeight:
+      theme.typography.fontSize.xs * theme.typography.lineHeight.relaxed,
+  };
+
+  return (
+    <Collapsible style={[{ marginTop: theme.spacing.sm }, style]}>
+      <CollapsibleTrigger>
+        <Text style={labelStyle}>Arguments</Text>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <View
+          style={[
+            styles.codeBlock,
+            {
+              backgroundColor: theme.colors.muted,
+              borderRadius: theme.radius.sm,
+              padding: theme.spacing.sm,
+              marginTop: theme.spacing.xs,
+            },
+          ]}
+        >
+          <Text style={codeStyle}>
+            {JSON.stringify(args, null, 2)}
+          </Text>
+        </View>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ToolResult
+// ---------------------------------------------------------------------------
+
+export interface ToolResultProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+function ToolResultComponent({ style }: ToolResultProps) {
+  const theme = useAIElementsTheme();
+  const { result } = useToolContext();
+
+  if (!result) {
+    return null;
+  }
+
+  const labelStyle: TextStyle = {
+    color: theme.colors.mutedForeground,
+    fontSize: theme.typography.fontSize.xs,
+    fontWeight: theme.typography.fontWeight.medium as TextStyle['fontWeight'],
+    fontFamily: theme.typography.fontFamily,
+  };
+
+  const resultTextStyle: TextStyle = {
+    color: theme.colors.foreground,
+    fontSize: theme.typography.fontSize.xs,
+    fontFamily: theme.typography.monoFontFamily,
+    lineHeight:
+      theme.typography.fontSize.xs * theme.typography.lineHeight.relaxed,
+  };
+
+  return (
+    <Collapsible style={[{ marginTop: theme.spacing.sm }, style]}>
+      <CollapsibleTrigger>
+        <Text style={labelStyle}>Result</Text>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <View
+          style={[
+            styles.codeBlock,
+            {
+              backgroundColor: theme.colors.muted,
+              borderRadius: theme.radius.sm,
+              padding: theme.spacing.sm,
+              marginTop: theme.spacing.xs,
+            },
+          ]}
+        >
+          <Text style={resultTextStyle}>{result}</Text>
+        </View>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  badgeContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  codeBlock: {
+    overflow: 'hidden',
+  },
+});
+
+// ---------------------------------------------------------------------------
+// Exports
+// ---------------------------------------------------------------------------
+
+export const Tool = memo(ToolRoot);
+export const ToolHeader = memo(ToolHeaderComponent);
+export const ToolArgs = memo(ToolArgsComponent);
+export const ToolResult = memo(ToolResultComponent);

package/src/chatbot/adapters/uiMessageAdapter.ts

@@ -0,0 +1,177 @@
+import type {
+  UIMessage,
+  UIMessagePart,
+  TextUIPart,
+  ReasoningUIPart,
+  SourceUrlUIPart,
+} from 'ai';
+import type { ChatMessageData, ChatTool } from '../types';
+import type { ToolStatus } from '../Tool';
+
+// ---------------------------------------------------------------------------
+// UIMessage → ChatMessageData
+// ---------------------------------------------------------------------------
+//
+// `@ai-sdk/react`'s `useChat()` returns messages in the canonical Vercel AI
+// SDK shape: each message has a `parts` array, where each part is a tagged
+// union (`text` / `reasoning` / `tool-*` / `source-url` / etc). Our
+// `ChatMessageItem` consumes a flatter `ChatMessageData` shape, so this file
+// provides the (small) adapter every consumer of `useChat` will need.
+//
+// The adapter is intentionally tolerant: missing parts are mapped to
+// `undefined` and the renderer skips them.
+//
+// **Why `import type` only?** `ai` is an optional peer dependency of this
+// package — consumers who don't use `@ai-sdk/react` shouldn't have to
+// install it. All imports from `ai` are type-only here, so they're erased
+// at runtime and the adapter function itself is plain JS that operates on
+// structural-shaped inputs.
+// ---------------------------------------------------------------------------
+
+const isTextPart = (p: UIMessagePart<never, never>): p is TextUIPart =>
+  p.type === 'text';
+
+const isReasoningPart = (
+  p: UIMessagePart<never, never>,
+): p is ReasoningUIPart => p.type === 'reasoning';
+
+const isSourceUrlPart = (
+  p: UIMessagePart<never, never>,
+): p is SourceUrlUIPart => p.type === 'source-url';
+
+/**
+ * Type guard for any tool part — covers both static `tool-${name}` parts
+ * and the `dynamic-tool` part. Both expose `state`, `toolCallId`, `input`,
+ * and (when complete) `output` / `errorText`.
+ */
+function isAnyToolPart(p: UIMessagePart<never, never>): p is Extract<
+  UIMessagePart<never, never>,
+  { toolCallId: string }
+> {
+  return p.type.startsWith('tool-') || p.type === 'dynamic-tool';
+}
+
+/** Extract the tool name from a `tool-${name}` part type, or fall back. */
+function getToolName(part: { type: string; toolName?: string }): string {
+  if (part.type === 'dynamic-tool' && typeof part.toolName === 'string') {
+    return part.toolName;
+  }
+  if (part.type.startsWith('tool-')) {
+    return part.type.slice('tool-'.length);
+  }
+  return 'tool';
+}
+
+/**
+ * Map the AI SDK's tool-call lifecycle (`'input-streaming'` → `'output-error'`)
+ * onto our `ToolStatus` (`'pending' | 'running' | 'completed' | 'failed'`).
+ */
+function mapToolState(state: string | undefined): ToolStatus {
+  switch (state) {
+    case 'input-streaming':
+    case 'input-available':
+    case 'approval-requested':
+    case 'approval-responded':
+      return 'running';
+    case 'output-available':
+      return 'completed';
+    case 'output-error':
+    case 'output-denied':
+      return 'failed';
+    default:
+      return 'pending';
+  }
+}
+
+/**
+ * Convert an `@ai-sdk/react` `UIMessage` into the canonical
+ * {@link ChatMessageData} shape consumed by `<ChatMessageItem>`.
+ *
+ * Behavior:
+ * - All `text` parts are concatenated in document order.
+ * - The first **non-empty** `reasoning` part wins (most messages only
+ *   have one); `isStreaming` follows the part's `state` field. Empty
+ *   reasoning shells (no deltas ever emitted) are filtered out so the UI
+ *   doesn't render a "Thinking..." ghost with nothing inside.
+ * - The first tool part wins (we only render one tool block per message
+ *   today — multi-tool messages can be added later).
+ * - All `source-url` parts are collected into the sources array.
+ *
+ * @example
+ * ```tsx
+ * const data = uiMessageToChatMessageData(message);
+ * return <ChatMessageItem item={data} />;
+ * ```
+ */
+export function uiMessageToChatMessageData(
+  message: UIMessage,
+): ChatMessageData {
+  // The `parts` array is generic over data + tool maps; we treat it as the
+  // base discriminated union here so the type guards stay simple.
+  const parts = message.parts as Array<UIMessagePart<never, never>>;
+
+  // Concatenate every text part.
+  const content = parts.filter(isTextPart).map((p) => p.text).join('');
+
+  // First non-empty reasoning part. A provider (or the AI SDK) may emit
+  // `reasoning-start` / `reasoning-end` markers without any deltas in
+  // between — for example when a reasoning model hasn't been opted into
+  // emitting summaries via `providerOptions.openai.reasoningSummary`.
+  // We filter those empty shells out so the UI doesn't render a
+  // "Thinking..." ghost with nothing inside.
+  const reasoningPart = parts.find(
+    (p): p is ReasoningUIPart => isReasoningPart(p) && p.text.length > 0,
+  );
+  const reasoning = reasoningPart
+    ? {
+        content: reasoningPart.text,
+        isStreaming: reasoningPart.state === 'streaming',
+      }
+    : undefined;
+
+  // First tool part.
+  const toolPart = parts.find(isAnyToolPart);
+  let tool: ChatTool | undefined;
+  if (toolPart) {
+    // The discriminated union splits across many state shapes; cast to a
+    // permissive view since we only read a small subset of fields.
+    const t = toolPart as unknown as {
+      state?: string;
+      input?: unknown;
+      output?: unknown;
+      errorText?: string;
+      toolName?: string;
+      type: string;
+    };
+    tool = {
+      name: getToolName(t),
+      status: mapToolState(t.state),
+      args:
+        t.input && typeof t.input === 'object'
+          ? (t.input as Record<string, unknown>)
+          : undefined,
+      result:
+        t.errorText ??
+        (t.output != null
+          ? typeof t.output === 'string'
+            ? t.output
+            : JSON.stringify(t.output)
+          : undefined),
+    };
+  }
+
+  // All source-url parts (we ignore source-document for now).
+  const sources = parts.filter(isSourceUrlPart).map((p) => ({
+    title: p.title ?? p.url,
+    url: p.url,
+  }));
+
+  return {
+    id: message.id,
+    role: message.role,
+    content,
+    reasoning,
+    tool,
+    sources: sources.length > 0 ? sources : undefined,
+  };
+}