@cryterion/expo-chat-ui 1.0.0 → 1.0.2

package/README.md

@@ -1,11 +1,11 @@
-# @tovia/chat-ui
+# @cryterion/expo-chat-ui
 
 A reusable chat UI component for Expo + React Native applications.
 
 ## Installation
 
 ```bash
-bun add @tovia/chat-ui
+bun add @cryterion/expo-chat-ui
 ```
 
 ## Usage
@@ -13,7 +13,7 @@ bun add @tovia/chat-ui
 ### Basic Usage
 
 ```tsx
-import { Chat, ChatMessage } from '@tovia/chat-ui';
+import { Chat, ChatMessage } from '@cryterion/expo-chat-ui';
 
 function ChatScreen() {
   const [messages, setMessages] = useState<ChatMessage[]>([]);
@@ -45,7 +45,7 @@ function ChatScreen() {
 ### With Custom Theme
 
 ```tsx
-import { Chat, ChatTheme } from '@tovia/chat-ui';
+import { Chat, ChatTheme } from '@cryterion/expo-chat-ui';
 
 const customTheme: Partial<ChatTheme> = {
   colors: {
@@ -73,7 +73,7 @@ function ChatScreen() {
 You can also use the individual building blocks:
 
 ```tsx
-import { MessageList, ChatInput, MessageBubble } from '@tovia/chat-ui';
+import { MessageList, ChatInput, MessageBubble } from '@cryterion/expo-chat-ui';
 
 function CustomChat() {
   return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryterion/expo-chat-ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A reusable chat UI component for Expo + React Native applications",
   "author": "cryterion",
   "license": "MIT",
@@ -61,4 +61,4 @@
     "react-native": "0.73.6",
     "typescript": "~5.9.3"
   }
-}
+}

package/src/components/Chat.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { KeyboardAvoidingView, Platform, StyleSheet, View } from 'react-native';
 import { mergeTheme } from '../theme/defaultTheme';
 import { ChatProps } from '../types';
 import { ChatInput } from './ChatInput';
@@ -29,27 +29,40 @@ export function Chat({
   placeholder,
   emptyStateTitle,
   emptyStateSubtitle,
+  keyboardVerticalOffset = 0,
+  autoCorrect,
+  spellCheck,
+  keyboardType,
 }: 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>
+    <KeyboardAvoidingView
+      style={{ flex: 1 }}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      keyboardVerticalOffset={keyboardVerticalOffset}
+    >
+      <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}
+          autoCorrect={autoCorrect}
+          spellCheck={spellCheck}
+          keyboardType={keyboardType}
+        />
+      </View>
+    </KeyboardAvoidingView>
   );
 }
 

package/src/components/ChatInput.tsx

@@ -1,8 +1,6 @@
 import { Ionicons } from '@expo/vector-icons';
 import React, { useState } from 'react';
 import {
-  KeyboardAvoidingView,
-  Platform,
   StyleSheet,
   TextInput,
   TouchableOpacity,
@@ -15,6 +13,9 @@ export function ChatInput({
   disabled,
   theme,
   placeholder = 'Type a message...',
+  autoCorrect = true,
+  spellCheck = true,
+  keyboardType = 'default',
 }: ChatInputProps) {
   const [text, setText] = useState('');
   const { colors } = theme;
@@ -30,55 +31,53 @@ export function ChatInput({
   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.container,
-          {
-            backgroundColor: colors.background,
-            borderTopColor: colors.border,
-          },
+          styles.inputContainer,
+          { backgroundColor: colors.inputBackground },
         ]}
       >
-        <View
+        <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}
+          autoCorrect={autoCorrect}
+          spellCheck={spellCheck}
+          keyboardType={keyboardType}
+        />
+        <TouchableOpacity
           style={[
-            styles.inputContainer,
-            { backgroundColor: colors.inputBackground },
+            styles.sendButton,
+            {
+              backgroundColor: canSend
+                ? colors.primary
+                : colors.sendButtonDisabled,
+            },
           ]}
+          onPress={handleSend}
+          disabled={!canSend}
+          activeOpacity={0.7}
         >
-          <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>
+          <Ionicons name="send" size={18} color="#FFFFFF" />
+        </TouchableOpacity>
       </View>
-    </KeyboardAvoidingView>
+    </View>
   );
 }
 

package/src/types.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { KeyboardTypeOptions } from 'react-native';
 
 /**
  * Represents a single chat message
@@ -88,6 +89,14 @@ export interface ChatProps {
   emptyStateTitle?: string;
   /** Empty state subtitle */
   emptyStateSubtitle?: string;
+  /** Keyboard vertical offset for KeyboardAvoidingView (defaults to 0) */
+  keyboardVerticalOffset?: number;
+  /** Enable/disable autocorrect (defaults to true) */
+  autoCorrect?: boolean;
+  /** Enable/disable spell check (defaults to true) */
+  spellCheck?: boolean;
+  /** Keyboard type (defaults to 'default') */
+  keyboardType?: KeyboardTypeOptions;
 }
 
 /**
@@ -134,4 +143,10 @@ export interface ChatInputProps {
   theme: ChatTheme;
   /** Placeholder text */
   placeholder?: string;
+  /** Enable/disable autocorrect (defaults to true) */
+  autoCorrect?: boolean;
+  /** Enable/disable spell check (defaults to true) */
+  spellCheck?: boolean;
+  /** Keyboard type (defaults to 'default') */
+  keyboardType?: KeyboardTypeOptions;
 }