@cryterion/expo-chat-ui 1.0.0

package/README.md

@@ -0,0 +1,138 @@
+# @tovia/chat-ui
+
+A reusable chat UI component for Expo + React Native applications.
+
+## Installation
+
+```bash
+bun add @tovia/chat-ui
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { Chat, ChatMessage } from '@tovia/chat-ui';
+
+function ChatScreen() {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSend = async (text: string) => {
+    // Add user message
+    const userMessage: ChatMessage = {
+      id: `user-${Date.now()}`,
+      role: 'user',
+      content: text,
+      timestamp: Date.now(),
+    };
+    setMessages(prev => [...prev, userMessage]);
+
+    // Your AI/backend logic here...
+  };
+
+  return (
+    <Chat
+      messages={messages}
+      onSend={handleSend}
+      isLoading={isLoading}
+    />
+  );
+}
+```
+
+### With Custom Theme
+
+```tsx
+import { Chat, ChatTheme } from '@tovia/chat-ui';
+
+const customTheme: Partial<ChatTheme> = {
+  colors: {
+    primary: '#007AFF',
+    userBubble: '#007AFF',
+    assistantBubble: '#E5E5EA',
+    userText: '#FFFFFF',
+    assistantText: '#000000',
+  },
+};
+
+function ChatScreen() {
+  return (
+    <Chat
+      messages={messages}
+      onSend={handleSend}
+      theme={customTheme}
+    />
+  );
+}
+```
+
+### Using Individual Components
+
+You can also use the individual building blocks:
+
+```tsx
+import { MessageList, ChatInput, MessageBubble } from '@tovia/chat-ui';
+
+function CustomChat() {
+  return (
+    <View style={{ flex: 1 }}>
+      <MessageList messages={messages} isLoading={isLoading} />
+      <ChatInput onSend={handleSend} />
+    </View>
+  );
+}
+```
+
+## API
+
+### `<Chat />` Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `messages` | `ChatMessage[]` | Yes | Array of messages to display |
+| `onSend` | `(text: string) => void \| Promise<void>` | Yes | Callback when user sends a message |
+| `isLoading` | `boolean` | No | Shows typing indicator when true |
+| `disabled` | `boolean` | No | Disables input when true |
+| `theme` | `Partial<ChatTheme>` | No | Custom theme colors |
+| `renderEmptyState` | `ReactNode \| () => ReactNode` | No | Custom empty state |
+| `onCopyMessage` | `(message: ChatMessage) => void` | No | Custom copy handler |
+
+### `ChatMessage` Type
+
+```ts
+interface ChatMessage {
+  id: string;
+  role: 'user' | 'assistant' | 'system';
+  content: string;
+  timestamp: number | Date;
+  meta?: Record<string, unknown>;
+}
+```
+
+### `ChatTheme` Type
+
+```ts
+interface ChatTheme {
+  mode: 'light' | 'dark';
+  colors: {
+    primary: string;
+    background: string;
+    inputBackground: string;
+    userBubble: string;
+    assistantBubble: string;
+    userText: string;
+    assistantText: string;
+    text: string;
+    textMuted: string;
+    placeholder: string;
+    border: string;
+    sendButtonDisabled: string;
+  };
+}
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@cryterion/expo-chat-ui",
+  "version": "1.0.0",
+  "description": "A reusable chat UI component for Expo + React Native applications",
+  "author": "cryterion",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mphassani/expo-chat-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/mphassani/expo-chat-ui/issues"
+  },
+  "homepage": "https://github.com/mphassani/expo-chat-ui#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run typecheck"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "chat",
+    "ui",
+    "component",
+    "messaging",
+    "conversation",
+    "chatbot"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0",
+    "expo": ">=50.0.0",
+    "@expo/vector-icons": ">=14.0.0",
+    "expo-clipboard": ">=7.0.0"
+  },
+  "devDependencies": {
+    "@expo/vector-icons": "^14.1.0",
+    "@types/react": "^18.2.79",
+    "expo": "^50.0.0",
+    "expo-clipboard": "^7.0.0",
+    "react": "18.2.0",
+    "react-native": "0.73.6",
+    "typescript": "~5.9.3"
+  }
+}

package/src/components/Chat.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { mergeTheme } from '../theme/defaultTheme';
+import { ChatProps } from '../types';
+import { ChatInput } from './ChatInput';
+import { MessageList } from './MessageList';
+
+/**
+ * Main Chat component that combines MessageList and ChatInput
+ *
+ * @example
+ * ```tsx
+ * <Chat
+ *   messages={messages}
+ *   onSend={handleSend}
+ *   isLoading={isLoading}
+ *   theme={{ mode: 'dark' }}
+ * />
+ * ```
+ */
+export function Chat({
+  messages,
+  onSend,
+  isLoading,
+  disabled,
+  theme: themeProp,
+  renderEmptyState,
+  onCopyMessage,
+  placeholder,
+  emptyStateTitle,
+  emptyStateSubtitle,
+}: ChatProps) {
+  const theme = mergeTheme(themeProp);
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+      <MessageList
+        messages={messages}
+        isLoading={isLoading}
+        theme={theme}
+        renderEmptyState={renderEmptyState}
+        onCopyMessage={onCopyMessage}
+        emptyStateTitle={emptyStateTitle}
+        emptyStateSubtitle={emptyStateSubtitle}
+      />
+      <ChatInput
+        onSend={onSend}
+        disabled={disabled || isLoading}
+        theme={theme}
+        placeholder={placeholder}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/components/ChatInput.tsx

@@ -0,0 +1,118 @@
+import { Ionicons } from '@expo/vector-icons';
+import React, { useState } from 'react';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { ChatInputProps } from '../types';
+
+export function ChatInput({
+  onSend,
+  disabled,
+  theme,
+  placeholder = 'Type a message...',
+}: ChatInputProps) {
+  const [text, setText] = useState('');
+  const { colors } = theme;
+
+  const handleSend = () => {
+    const trimmedText = text.trim();
+    if (trimmedText && !disabled) {
+      onSend(trimmedText);
+      setText('');
+    }
+  };
+
+  const canSend = text.trim().length > 0 && !disabled;
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
+    >
+      <View
+        style={[
+          styles.container,
+          {
+            backgroundColor: colors.background,
+            borderTopColor: colors.border,
+          },
+        ]}
+      >
+        <View
+          style={[
+            styles.inputContainer,
+            { backgroundColor: colors.inputBackground },
+          ]}
+        >
+          <TextInput
+            style={[styles.input, { color: colors.text }]}
+            placeholder={placeholder}
+            placeholderTextColor={colors.placeholder}
+            value={text}
+            onChangeText={setText}
+            multiline
+            maxLength={2000}
+            editable={!disabled}
+            onSubmitEditing={handleSend}
+            blurOnSubmit={false}
+          />
+          <TouchableOpacity
+            style={[
+              styles.sendButton,
+              {
+                backgroundColor: canSend
+                  ? colors.primary
+                  : colors.sendButtonDisabled,
+              },
+            ]}
+            onPress={handleSend}
+            disabled={!canSend}
+            activeOpacity={0.7}
+          >
+            <Ionicons name="send" size={18} color="#FFFFFF" />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    borderRadius: 24,
+    paddingLeft: 16,
+    paddingRight: 6,
+    paddingVertical: 6,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 2,
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    maxHeight: 100,
+    paddingVertical: 8,
+    paddingRight: 8,
+  },
+  sendButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/MessageBubble.tsx

@@ -0,0 +1,113 @@
+import { Ionicons } from '@expo/vector-icons';
+import * as Clipboard from 'expo-clipboard';
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { ChatMessage, MessageBubbleProps } from '../types';
+
+/**
+ * Format timestamp to time string (e.g., "2:30 PM")
+ */
+function formatTime(timestamp: number | Date): string {
+  const date = typeof timestamp === 'number' ? new Date(timestamp) : timestamp;
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+/**
+ * Default copy to clipboard implementation
+ */
+async function defaultCopyToClipboard(message: ChatMessage): Promise<void> {
+  await Clipboard.setStringAsync(message.content);
+}
+
+export function MessageBubble({ message, theme, onCopy }: MessageBubbleProps) {
+  const isUser = message.role === 'user';
+  const { colors } = theme;
+
+  const backgroundColor = isUser ? colors.userBubble : colors.assistantBubble;
+  const textColor = isUser ? colors.userText : colors.assistantText;
+  const mutedColor = isUser ? colors.userBubbleMuted : colors.assistantBubbleMuted;
+
+  const handleCopy = () => {
+    if (onCopy) {
+      onCopy(message);
+    } else {
+      defaultCopyToClipboard(message);
+    }
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        isUser ? styles.userContainer : styles.assistantContainer,
+      ]}
+    >
+      <View
+        style={[
+          styles.bubble,
+          { backgroundColor },
+          isUser ? styles.userBubble : styles.assistantBubble,
+        ]}
+      >
+        <Text style={[styles.messageText, { color: textColor }]}>
+          {message.content}
+        </Text>
+        <View style={styles.footer}>
+          <Text style={[styles.timestamp, { color: mutedColor }]}>
+            {formatTime(message.timestamp)}
+          </Text>
+          <TouchableOpacity
+            style={styles.copyButton}
+            onPress={handleCopy}
+            activeOpacity={0.7}
+            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+          >
+            <Ionicons name="copy-outline" size={14} color={mutedColor} />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+    paddingVertical: 4,
+  },
+  userContainer: {
+    alignItems: 'flex-end',
+  },
+  assistantContainer: {
+    alignItems: 'flex-start',
+  },
+  bubble: {
+    maxWidth: '80%',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 20,
+  },
+  userBubble: {
+    borderBottomRightRadius: 4,
+  },
+  assistantBubble: {
+    borderBottomLeftRadius: 4,
+  },
+  messageText: {
+    fontSize: 16,
+    lineHeight: 22,
+  },
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    marginTop: 4,
+    gap: 8,
+  },
+  timestamp: {
+    fontSize: 11,
+  },
+  copyButton: {
+    padding: 2,
+  },
+});

package/src/components/MessageList.tsx

@@ -0,0 +1,180 @@
+import { Ionicons } from '@expo/vector-icons';
+import React, { useEffect, useRef } from 'react';
+import { FlatList, StyleSheet, Text, View } from 'react-native';
+import { ChatMessage, MessageListProps } from '../types';
+import { MessageBubble } from './MessageBubble';
+
+/**
+ * Default empty state component
+ */
+function DefaultEmptyState({
+  title,
+  subtitle,
+  iconColor,
+  textColor,
+  textMutedColor,
+}: {
+  title: string;
+  subtitle: string;
+  iconColor: string;
+  textColor: string;
+  textMutedColor: string;
+}) {
+  return (
+    <View style={styles.emptyContainer}>
+      <Ionicons name="chatbubbles-outline" size={64} color={iconColor} />
+      <Text style={[styles.emptyTitle, { color: textColor }]}>{title}</Text>
+      <Text style={[styles.emptySubtitle, { color: textMutedColor }]}>
+        {subtitle}
+      </Text>
+    </View>
+  );
+}
+
+/**
+ * Typing indicator component
+ */
+function TypingIndicator({ bubbleColor, dotColor }: { bubbleColor: string; dotColor: string }) {
+  return (
+    <View style={styles.loadingContainer}>
+      <View style={[styles.typingIndicator, { backgroundColor: bubbleColor }]}>
+        <View style={[styles.dot, styles.dot1, { backgroundColor: dotColor }]} />
+        <View style={[styles.dot, styles.dot2, { backgroundColor: dotColor }]} />
+        <View style={[styles.dot, styles.dot3, { backgroundColor: dotColor }]} />
+      </View>
+    </View>
+  );
+}
+
+export function MessageList({
+  messages,
+  isLoading,
+  theme,
+  renderEmptyState,
+  onCopyMessage,
+  emptyStateTitle = 'Start a conversation',
+  emptyStateSubtitle = 'Type a message below to get started',
+}: MessageListProps) {
+  const flatListRef = useRef<FlatList<ChatMessage>>(null);
+  const { colors } = theme;
+
+  useEffect(() => {
+    if (messages.length > 0 && flatListRef.current) {
+      setTimeout(() => {
+        flatListRef.current?.scrollToEnd({ animated: true });
+      }, 100);
+    }
+  }, [messages.length]);
+
+  const renderItem = ({ item }: { item: ChatMessage }) => (
+    <MessageBubble message={item} theme={theme} onCopy={onCopyMessage} />
+  );
+
+  const renderEmptyStateComponent = () => {
+    if (renderEmptyState) {
+      if (typeof renderEmptyState === 'function') {
+        return renderEmptyState();
+      }
+      return renderEmptyState;
+    }
+
+    return (
+      <DefaultEmptyState
+        title={emptyStateTitle}
+        subtitle={emptyStateSubtitle}
+        iconColor={colors.text}
+        textColor={colors.text}
+        textMutedColor={colors.textMuted}
+      />
+    );
+  };
+
+  const renderLoadingIndicator = () => {
+    if (!isLoading) return null;
+    return (
+      <TypingIndicator
+        bubbleColor={colors.loadingBubble}
+        dotColor={colors.loadingDots}
+      />
+    );
+  };
+
+  // Using key to force remount when transitioning between empty/non-empty states
+  // This fixes the scroll size not resetting when clearing messages
+  const listKey = messages.length === 0 ? 'empty' : 'populated';
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <FlatList
+        key={listKey}
+        ref={flatListRef}
+        data={messages}
+        renderItem={renderItem}
+        keyExtractor={(item: ChatMessage) => item.id}
+        contentContainerStyle={[
+          styles.listContent,
+          messages.length === 0 && styles.emptyListContent,
+        ]}
+        ListEmptyComponent={renderEmptyStateComponent}
+        ListFooterComponent={renderLoadingIndicator}
+        showsVerticalScrollIndicator={false}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  listContent: {
+    paddingVertical: 16,
+  },
+  emptyListContent: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  emptyContainer: {
+    alignItems: 'center',
+    paddingHorizontal: 32,
+  },
+  emptyTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    marginTop: 16,
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  emptySubtitle: {
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  loadingContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    alignItems: 'flex-start',
+  },
+  typingIndicator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: 20,
+    borderBottomLeftRadius: 4,
+  },
+  dot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginHorizontal: 2,
+  },
+  dot1: {
+    opacity: 0.4,
+  },
+  dot2: {
+    opacity: 0.6,
+  },
+  dot3: {
+    opacity: 0.8,
+  },
+});

package/src/index.ts

@@ -0,0 +1,26 @@
+// Types
+export type {
+  ChatMessage,
+  ChatTheme,
+  ChatThemeColors,
+  ChatProps,
+  MessageBubbleProps,
+  MessageListProps,
+  ChatInputProps,
+} from './types';
+
+// Components
+export { Chat } from './components/Chat';
+export { ChatInput } from './components/ChatInput';
+export { MessageBubble } from './components/MessageBubble';
+export { MessageList } from './components/MessageList';
+
+// Theme utilities
+export {
+  lightTheme,
+  darkTheme,
+  lightColors,
+  darkColors,
+  getDefaultTheme,
+  mergeTheme,
+} from './theme/defaultTheme';

package/src/theme/defaultTheme.ts

@@ -0,0 +1,87 @@
+import { ChatTheme, ChatThemeColors } from '../types';
+
+/**
+ * Default light theme colors
+ * Based on the original Tovia app theme
+ */
+export const lightColors: ChatThemeColors = {
+  primary: '#FF8360',
+  background: '#EFF1ED',
+  inputBackground: '#FFFFFF',
+  userBubble: '#FF8360',
+  assistantBubble: '#E8E4D3',
+  userText: '#FFFFFF',
+  assistantText: '#2A2B2A',
+  text: '#2A2B2A',
+  textMuted: 'rgba(0, 0, 0, 0.5)',
+  placeholder: '#999999',
+  border: 'rgba(0, 0, 0, 0.1)',
+  sendButtonDisabled: '#CCCCCC',
+  userBubbleMuted: 'rgba(255, 255, 255, 0.7)',
+  assistantBubbleMuted: 'rgba(0, 0, 0, 0.4)',
+  loadingBubble: '#E8E4D3',
+  loadingDots: '#888888',
+};
+
+/**
+ * Default dark theme colors
+ */
+export const darkColors: ChatThemeColors = {
+  primary: '#FF8360',
+  background: '#2A2B2A',
+  inputBackground: '#3A3B3A',
+  userBubble: '#FF8360',
+  assistantBubble: '#3A3B3A',
+  userText: '#FFFFFF',
+  assistantText: '#F8F4E3',
+  text: '#F8F4E3',
+  textMuted: 'rgba(255, 255, 255, 0.5)',
+  placeholder: '#666666',
+  border: 'rgba(255, 255, 255, 0.1)',
+  sendButtonDisabled: '#666666',
+  userBubbleMuted: 'rgba(255, 255, 255, 0.7)',
+  assistantBubbleMuted: 'rgba(255, 255, 255, 0.5)',
+  loadingBubble: '#3A3B3A',
+  loadingDots: '#888888',
+};
+
+/**
+ * Default light theme
+ */
+export const lightTheme: ChatTheme = {
+  mode: 'light',
+  colors: lightColors,
+};
+
+/**
+ * Default dark theme
+ */
+export const darkTheme: ChatTheme = {
+  mode: 'dark',
+  colors: darkColors,
+};
+
+/**
+ * Get the default theme based on mode
+ */
+export function getDefaultTheme(mode: 'light' | 'dark' = 'light'): ChatTheme {
+  return mode === 'dark' ? darkTheme : lightTheme;
+}
+
+/**
+ * Merge a partial theme with the default theme
+ */
+export function mergeTheme(
+  partial?: Partial<ChatTheme> & { colors?: Partial<ChatThemeColors> }
+): ChatTheme {
+  const mode = partial?.mode ?? 'light';
+  const defaultTheme = getDefaultTheme(mode);
+
+  return {
+    mode,
+    colors: {
+      ...defaultTheme.colors,
+      ...(partial?.colors ?? {}),
+    },
+  };
+}

package/src/types.ts

@@ -0,0 +1,137 @@
+import { ReactNode } from 'react';
+
+/**
+ * Represents a single chat message
+ */
+export interface ChatMessage {
+  /** Unique identifier for the message */
+  id: string;
+  /** Role of the message sender */
+  role: 'user' | 'assistant' | 'system';
+  /** Text content of the message */
+  content: string;
+  /** Timestamp of when the message was sent (ms since epoch or Date) */
+  timestamp: number | Date;
+  /** Optional metadata for extending message data */
+  meta?: Record<string, unknown>;
+}
+
+/**
+ * Theme colors for the chat UI
+ */
+export interface ChatThemeColors {
+  /** Primary/accent color (used for send button, etc.) */
+  primary: string;
+  /** Main background color */
+  background: string;
+  /** Input field background */
+  inputBackground: string;
+  /** User message bubble background */
+  userBubble: string;
+  /** Assistant message bubble background */
+  assistantBubble: string;
+  /** Text color inside user bubbles */
+  userText: string;
+  /** Text color inside assistant bubbles */
+  assistantText: string;
+  /** Primary text color */
+  text: string;
+  /** Muted/secondary text color */
+  textMuted: string;
+  /** Placeholder text color */
+  placeholder: string;
+  /** Border color */
+  border: string;
+  /** Disabled send button color */
+  sendButtonDisabled: string;
+  /** Muted color for icons/timestamps in user bubbles */
+  userBubbleMuted: string;
+  /** Muted color for icons/timestamps in assistant bubbles */
+  assistantBubbleMuted: string;
+  /** Loading indicator bubble background */
+  loadingBubble: string;
+  /** Loading indicator dots color */
+  loadingDots: string;
+}
+
+/**
+ * Complete theme configuration
+ */
+export interface ChatTheme {
+  /** Color mode */
+  mode: 'light' | 'dark';
+  /** Theme colors */
+  colors: ChatThemeColors;
+}
+
+/**
+ * Props for the main Chat component
+ */
+export interface ChatProps {
+  /** Array of messages to display */
+  messages: ChatMessage[];
+  /** Callback when user sends a message */
+  onSend: (text: string) => void | Promise<void>;
+  /** Shows typing indicator when true */
+  isLoading?: boolean;
+  /** Disables input when true */
+  disabled?: boolean;
+  /** Custom theme (merged with defaults based on mode) */
+  theme?: Partial<ChatTheme> & { colors?: Partial<ChatThemeColors> };
+  /** Custom empty state renderer */
+  renderEmptyState?: ReactNode | (() => ReactNode);
+  /** Custom copy message handler (defaults to expo-clipboard) */
+  onCopyMessage?: (message: ChatMessage) => void;
+  /** Input placeholder text */
+  placeholder?: string;
+  /** Empty state title */
+  emptyStateTitle?: string;
+  /** Empty state subtitle */
+  emptyStateSubtitle?: string;
+}
+
+/**
+ * Props for MessageBubble component
+ */
+export interface MessageBubbleProps {
+  /** The message to display */
+  message: ChatMessage;
+  /** Theme colors */
+  theme: ChatTheme;
+  /** Custom copy handler */
+  onCopy?: (message: ChatMessage) => void;
+}
+
+/**
+ * Props for MessageList component
+ */
+export interface MessageListProps {
+  /** Array of messages to display */
+  messages: ChatMessage[];
+  /** Shows typing indicator when true */
+  isLoading?: boolean;
+  /** Theme configuration */
+  theme: ChatTheme;
+  /** Custom empty state renderer */
+  renderEmptyState?: ReactNode | (() => ReactNode);
+  /** Custom copy handler */
+  onCopyMessage?: (message: ChatMessage) => void;
+  /** Empty state title */
+  emptyStateTitle?: string;
+  /** Empty state subtitle */
+  emptyStateSubtitle?: string;
+}
+
+/**
+ * Props for ChatInput component
+ */
+export interface ChatInputProps {
+  /** Callback when user sends a message */
+  onSend: (text: string) => void | Promise<void>;
+  /** Disables input when true */
+  disabled?: boolean;
+  /** Theme configuration */
+  theme: ChatTheme;
+  /** Placeholder text */
+  placeholder?: string;
+}