@rohan_p31/ai-chat-sdk 1.0.0

package/lib/theme/colors.d.ts

@@ -0,0 +1,20 @@
+import type { ChatTheme } from '../types/Message';
+export interface ThemeColors {
+    background: string;
+    surface: string;
+    headerBackground: string;
+    headerText: string;
+    userBubble: string;
+    userText: string;
+    assistantBubble: string;
+    assistantText: string;
+    inputBackground: string;
+    inputText: string;
+    inputBorder: string;
+    placeholder: string;
+    typingText: string;
+    primary: string;
+    separator: string;
+}
+export declare function getThemeColors(theme?: ChatTheme, primaryColor?: string): ThemeColors;
+//# sourceMappingURL=colors.d.ts.map

package/lib/theme/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/theme/colors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB;AAkCD,wBAAgB,cAAc,CAC5B,KAAK,GAAE,SAAmB,EAC1B,YAAY,SAAY,GACvB,WAAW,CAOb"}

package/lib/theme/colors.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThemeColors = getThemeColors;
+const lightBase = {
+    background: '#F5F5F5',
+    surface: '#FFFFFF',
+    headerBackground: '#FFFFFF',
+    headerText: '#1A1A1A',
+    userText: '#FFFFFF',
+    assistantBubble: '#E8E8E8',
+    assistantText: '#1A1A1A',
+    inputBackground: '#FFFFFF',
+    inputText: '#1A1A1A',
+    inputBorder: '#D0D0D0',
+    placeholder: '#8A8A8A',
+    typingText: '#6B6B6B',
+    separator: '#E0E0E0',
+};
+const darkBase = {
+    background: '#121212',
+    surface: '#1E1E1E',
+    headerBackground: '#1E1E1E',
+    headerText: '#F5F5F5',
+    userText: '#FFFFFF',
+    assistantBubble: '#2C2C2C',
+    assistantText: '#F0F0F0',
+    inputBackground: '#2A2A2A',
+    inputText: '#F5F5F5',
+    inputBorder: '#3A3A3A',
+    placeholder: '#9A9A9A',
+    typingText: '#A0A0A0',
+    separator: '#2A2A2A',
+};
+function getThemeColors(theme = 'light', primaryColor = '#6200EE') {
+    const base = theme === 'dark' ? darkBase : lightBase;
+    return {
+        ...base,
+        primary: primaryColor,
+        userBubble: primaryColor,
+    };
+}
+//# sourceMappingURL=colors.js.map

package/lib/theme/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../src/theme/colors.ts"],"names":[],"mappings":";;AAoDA,wCAUC;AA1CD,MAAM,SAAS,GAAgD;IAC7D,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,SAAS;IAClB,gBAAgB,EAAE,SAAS;IAC3B,UAAU,EAAE,SAAS;IACrB,QAAQ,EAAE,SAAS;IACnB,eAAe,EAAE,SAAS;IAC1B,aAAa,EAAE,SAAS;IACxB,eAAe,EAAE,SAAS;IAC1B,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,UAAU,EAAE,SAAS;IACrB,SAAS,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,QAAQ,GAAgD;IAC5D,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,SAAS;IAClB,gBAAgB,EAAE,SAAS;IAC3B,UAAU,EAAE,SAAS;IACrB,QAAQ,EAAE,SAAS;IACnB,eAAe,EAAE,SAAS;IAC1B,aAAa,EAAE,SAAS;IACxB,eAAe,EAAE,SAAS;IAC1B,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;IACtB,UAAU,EAAE,SAAS;IACrB,SAAS,EAAE,SAAS;CACrB,CAAC;AAEF,SAAgB,cAAc,CAC5B,QAAmB,OAAO,EAC1B,YAAY,GAAG,SAAS;IAExB,MAAM,IAAI,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IACrD,OAAO;QACL,GAAG,IAAI;QACP,OAAO,EAAE,YAAY;QACrB,UAAU,EAAE,YAAY;KACzB,CAAC;AACJ,CAAC"}

package/lib/types/Message.d.ts

@@ -0,0 +1,20 @@
+export interface Message {
+    id: string;
+    text: string;
+    isUser: boolean;
+    timestamp: number;
+}
+export type ChatTheme = 'light' | 'dark';
+export interface AIChatProps {
+    assistantName?: string;
+    welcomeMessage?: string;
+    theme?: ChatTheme;
+    primaryColor?: string;
+    assistantAvatar?: number | {
+        uri: string;
+    };
+    userAvatar?: number | {
+        uri: string;
+    };
+}
+//# sourceMappingURL=Message.d.ts.map

package/lib/types/Message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../src/types/Message.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC,MAAM,WAAW,WAAW;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;CACvC"}

package/lib/types/Message.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=Message.js.map

package/lib/types/Message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../src/types/Message.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@rohan_p31/ai-chat-sdk",
+  "version": "1.0.0",
+  "description": "React Native AI chat UI SDK with mock streaming responses",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "react-native": "src/index.ts",
+  "files": [
+    "lib",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepare": "npm run build",
+    "clean": "rm -rf lib"
+  },
+  "keywords": [
+    "react-native",
+    "ai",
+    "chat",
+    "sdk",
+    "streaming"
+  ],
+  "author": "Innowrap Technologies",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "react-native": "^0.76.0",
+    "typescript": "^5.6.3"
+  }
+}

package/src/components/AIChat.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import {
+  FlatList,
+  KeyboardAvoidingView,
+  Platform,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  View,
+  type ListRenderItem,
+} from 'react-native';
+import type { AIChatProps, Message } from '../types/Message';
+import { getThemeColors } from '../theme/colors';
+import { useChat } from '../hooks/useChat';
+import { MessageBubble } from './MessageBubble';
+import { ChatInput } from './ChatInput';
+
+export function AIChat({
+  assistantName = 'AI Assistant',
+  welcomeMessage = 'Hi, how can I help?',
+  theme = 'light',
+  primaryColor = '#6200EE',
+  assistantAvatar,
+  userAvatar,
+}: AIChatProps) {
+  const colors = useMemo(
+    () => getThemeColors(theme, primaryColor),
+    [theme, primaryColor],
+  );
+
+  const { messages, isTyping, isStreaming, sendMessage } = useChat({
+    welcomeMessage,
+  });
+
+  const listRef = useRef<FlatList<Message>>(null);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      listRef.current?.scrollToEnd({ animated: true });
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [messages, isTyping]);
+
+  const renderItem: ListRenderItem<Message> = ({ item }) => {
+    if (!item.isUser && item.text.length === 0) {
+      return null;
+    }
+
+    return (
+      <MessageBubble
+        message={item}
+        colors={colors}
+        assistantAvatar={assistantAvatar}
+        userAvatar={userAvatar}
+      />
+    );
+  };
+
+  return (
+    <SafeAreaView style={[styles.safe, { backgroundColor: colors.background }]}>
+      <KeyboardAvoidingView
+        style={styles.flex}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 8 : 0}
+      >
+        <View
+          style={[
+            styles.header,
+            {
+              backgroundColor: colors.headerBackground,
+              borderBottomColor: colors.separator,
+            },
+          ]}
+        >
+          <Text style={[styles.headerTitle, { color: colors.headerText }]}>
+            {assistantName}
+          </Text>
+        </View>
+
+        <FlatList
+          ref={listRef}
+          data={messages}
+          keyExtractor={item => item.id}
+          renderItem={renderItem}
+          contentContainerStyle={styles.listContent}
+          style={[styles.flex, { backgroundColor: colors.background }]}
+          onContentSizeChange={() =>
+            listRef.current?.scrollToEnd({ animated: true })
+          }
+          keyboardShouldPersistTaps="handled"
+        />
+
+        {isTyping && (
+          <View style={styles.typingRow}>
+            <Text style={[styles.typingText, { color: colors.typingText }]}>
+              AI is typing...
+            </Text>
+          </View>
+        )}
+
+        <ChatInput
+          colors={colors}
+          disabled={isStreaming}
+          onSend={sendMessage}
+        />
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safe: {
+    flex: 1,
+  },
+  flex: {
+    flex: 1,
+  },
+  header: {
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  headerTitle: {
+    fontSize: 17,
+    fontWeight: '700',
+  },
+  listContent: {
+    paddingVertical: 12,
+    flexGrow: 1,
+  },
+  typingRow: {
+    paddingHorizontal: 20,
+    paddingBottom: 6,
+  },
+  typingText: {
+    fontSize: 13,
+    fontStyle: 'italic',
+  },
+});

package/src/components/ChatInput.tsx

@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import type { ThemeColors } from '../theme/colors';
+
+export interface ChatInputProps {
+  colors: ThemeColors;
+  disabled?: boolean;
+  onSend: (text: string) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ChatInput({
+  colors,
+  disabled = false,
+  onSend,
+  style,
+}: ChatInputProps) {
+  const [text, setText] = useState('');
+
+  const handleSend = () => {
+    const trimmed = text.trim();
+    if (!trimmed || disabled) {
+      return;
+    }
+    onSend(trimmed);
+    setText('');
+  };
+
+  const canSend = text.trim().length > 0 && !disabled;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.surface,
+          borderTopColor: colors.separator,
+        },
+        style,
+      ]}
+    >
+      <TextInput
+        value={text}
+        onChangeText={setText}
+        placeholder="Type Message..."
+        placeholderTextColor={colors.placeholder}
+        editable={!disabled}
+        multiline
+        style={[
+          styles.input,
+          {
+            backgroundColor: colors.inputBackground,
+            borderColor: colors.inputBorder,
+            color: colors.inputText,
+          },
+        ]}
+        onSubmitEditing={handleSend}
+        blurOnSubmit={false}
+      />
+      <Pressable
+        onPress={handleSend}
+        disabled={!canSend}
+        style={({ pressed }) => [
+          styles.sendButton,
+          {
+            backgroundColor: canSend ? colors.primary : colors.inputBorder,
+            opacity: pressed && canSend ? 0.85 : 1,
+          },
+        ]}
+      >
+        <Text style={styles.sendLabel}>Send</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    gap: 8,
+  },
+  input: {
+    flex: 1,
+    minHeight: 40,
+    maxHeight: 120,
+    borderWidth: 1,
+    borderRadius: 20,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    fontSize: 15,
+  },
+  sendButton: {
+    height: 40,
+    paddingHorizontal: 16,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  sendLabel: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});

package/src/components/MessageBubble.tsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import {
+  Image,
+  StyleSheet,
+  Text,
+  View,
+  type ImageSourcePropType,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import type { Message } from '../types/Message';
+import type { ThemeColors } from '../theme/colors';
+
+export interface MessageBubbleProps {
+  message: Message;
+  colors: ThemeColors;
+  assistantAvatar?: ImageSourcePropType;
+  userAvatar?: ImageSourcePropType;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function MessageBubble({
+  message,
+  colors,
+  assistantAvatar,
+  userAvatar,
+  style,
+}: MessageBubbleProps) {
+  const isUser = message.isUser;
+  const avatar = isUser ? userAvatar : assistantAvatar;
+
+  return (
+    <View
+      style={[
+        styles.row,
+        isUser ? styles.rowUser : styles.rowAssistant,
+        style,
+      ]}
+    >
+      {!isUser && (
+        <View style={styles.avatarSlot}>
+          {avatar ? (
+            <Image source={avatar} style={styles.avatar} />
+          ) : (
+            <View
+              style={[
+                styles.avatarPlaceholder,
+                { backgroundColor: colors.assistantBubble },
+              ]}
+            >
+              <Text style={[styles.avatarLetter, { color: colors.assistantText }]}>
+                AI
+              </Text>
+            </View>
+          )}
+        </View>
+      )}
+
+      <View
+        style={[
+          styles.bubble,
+          {
+            backgroundColor: isUser ? colors.userBubble : colors.assistantBubble,
+          },
+          isUser ? styles.bubbleUser : styles.bubbleAssistant,
+        ]}
+      >
+        <Text
+          style={[
+            styles.text,
+            { color: isUser ? colors.userText : colors.assistantText },
+          ]}
+        >
+          {message.text}
+        </Text>
+      </View>
+
+      {isUser && (
+        <View style={styles.avatarSlot}>
+          {avatar ? (
+            <Image source={avatar} style={styles.avatar} />
+          ) : (
+            <View
+              style={[
+                styles.avatarPlaceholder,
+                { backgroundColor: colors.primary },
+              ]}
+            >
+              <Text style={[styles.avatarLetter, { color: colors.userText }]}>
+                U
+              </Text>
+            </View>
+          )}
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    marginVertical: 4,
+    paddingHorizontal: 12,
+    maxWidth: '100%',
+  },
+  rowUser: {
+    justifyContent: 'flex-end',
+  },
+  rowAssistant: {
+    justifyContent: 'flex-start',
+  },
+  avatarSlot: {
+    width: 32,
+    height: 32,
+    marginHorizontal: 6,
+  },
+  avatar: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+  },
+  avatarPlaceholder: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  avatarLetter: {
+    fontSize: 11,
+    fontWeight: '700',
+  },
+  bubble: {
+    maxWidth: '72%',
+    borderRadius: 16,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+  },
+  bubbleUser: {
+    borderBottomRightRadius: 4,
+  },
+  bubbleAssistant: {
+    borderBottomLeftRadius: 4,
+  },
+  text: {
+    fontSize: 15,
+    lineHeight: 21,
+  },
+});

package/src/hooks/useChat.ts

@@ -0,0 +1,77 @@
+import { useCallback, useRef, useState } from 'react';
+import type { Message } from '../types/Message';
+import MockChatService from '../services/MockChatService';
+
+function createId(): string {
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+export interface UseChatOptions {
+  welcomeMessage?: string;
+}
+
+export function useChat(options: UseChatOptions = {}) {
+  const { welcomeMessage = 'Hi, how can I help?' } = options;
+
+  const [messages, setMessages] = useState<Message[]>(() => [
+    {
+      id: createId(),
+      text: welcomeMessage,
+      isUser: false,
+      timestamp: Date.now(),
+    },
+  ]);
+  const [isTyping, setIsTyping] = useState(false);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const busyRef = useRef(false);
+
+  const sendMessage = useCallback(async (text: string) => {
+    const trimmed = text.trim();
+    if (!trimmed || busyRef.current) {
+      return;
+    }
+
+    busyRef.current = true;
+
+    const userMessage: Message = {
+      id: createId(),
+      text: trimmed,
+      isUser: true,
+      timestamp: Date.now(),
+    };
+
+    const assistantId = createId();
+    const assistantMessage: Message = {
+      id: assistantId,
+      text: '',
+      isUser: false,
+      timestamp: Date.now(),
+    };
+
+    setMessages(prev => [...prev, userMessage, assistantMessage]);
+    setIsTyping(true);
+    setIsStreaming(true);
+
+    try {
+      await MockChatService.streamMessage(trimmed, partialText => {
+        setIsTyping(false);
+        setMessages(prev =>
+          prev.map(msg =>
+            msg.id === assistantId ? { ...msg, text: partialText } : msg,
+          ),
+        );
+      });
+    } finally {
+      setIsTyping(false);
+      setIsStreaming(false);
+      busyRef.current = false;
+    }
+  }, []);
+
+  return {
+    messages,
+    isTyping,
+    isStreaming,
+    sendMessage,
+  };
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+export { AIChat } from './components/AIChat';
+export { MessageBubble } from './components/MessageBubble';
+export { ChatInput } from './components/ChatInput';
+export { useChat } from './hooks/useChat';
+export { default as MockChatService } from './services/MockChatService';
+export { getThemeColors } from './theme/colors';
+export type { Message, AIChatProps, ChatTheme } from './types/Message';
+export type { ThemeColors } from './theme/colors';

package/src/services/MockChatService.ts

@@ -0,0 +1,31 @@
+const sleep = (ms: number) => new Promise<void>(resolve => setTimeout(resolve, ms));
+
+class MockChatService {
+  async sendMessage(message: string): Promise<string> {
+    await sleep(1500);
+    return `Dummy response for: ${message}`;
+  }
+
+  async streamMessage(
+    message: string,
+    onChunk: (partialText: string) => void,
+  ): Promise<string> {
+    await sleep(600);
+
+    const dummyResponse =
+      `Hello! This is a dummy streaming response for: "${message}". ` +
+      'In a real integration, this text would come from your AI backend.';
+
+    let currentText = '';
+
+    for (let i = 0; i < dummyResponse.length; i++) {
+      currentText += dummyResponse[i];
+      onChunk(currentText);
+      await sleep(30);
+    }
+
+    return currentText;
+  }
+}
+
+export default new MockChatService();