@happiest-team/ai-chat-native 1.0.1

package/README.md

@@ -0,0 +1,66 @@
+# @happiest-team/ai-chat-native
+
+[![NPM Version](https://img.shields.io/npm/v/@happiest-team/ai-chat-native.svg?style=flat-square)](https://www.npmjs.com/package/@happiest-team/ai-chat-native)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square)](https://opensource.org/licenses/MIT)
+[![React Native](https://img.shields.io/badge/React_Native-0.72+-61DAFB.svg?style=flat-square)](https://reactnative.dev/)
+
+The official React Native SDK for **Happiest Chat**. Embed native, high-performance AI chat agents into your iOS and Android mobile applications seamlessly.
+
+## 🚀 Features
+
+- **Native Performance:** Fully optimized using `Animated` API and React Native UI threads for butter-smooth interactions.
+- **Premium Native UI:** `<ChatPanel />` comes with iOS-style bottom sheets, bouncing dot animations, and keyboard-avoiding views.
+- **Headless Hooks:** `useHappiestChat()` available for building entirely custom native interfaces.
+- **Cross-Platform:** Write once, works perfectly on both iOS and Android.
+
+## 📦 Installation
+
+```bash
+npm install @happiest-team/ai-chat-native @happiest-team/ai-chat-core
+```
+
+## 🛠 Quick Start
+
+### 1. Setup the Provider
+Wrap your app root with `HappiestProvider`.
+
+```tsx
+import { HappiestProvider } from '@happiest-team/ai-chat-native';
+
+export default function App() {
+  return (
+    <HappiestProvider 
+      clubId="YOUR_CLUB_ID"
+      config={{
+        publishableKey: "pk_live_your_key"
+      }}
+    >
+      <YourAppNavigator />
+    </HappiestProvider>
+  );
+}
+```
+
+### 2. Render the Chat Screen
+Drop the native `ChatPanel` into your Screen or Modal.
+
+```tsx
+import { ChatPanel } from '@happiest-team/ai-chat-native';
+import { View, StyleSheet } from 'react-native';
+
+export function ChatScreen() {
+  return (
+    <View style={styles.container}>
+      {/* The ChatPanel automatically handles KeyboardAvoidingView */}
+      <ChatPanel />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 }
+});
+```
+
+## 📄 License
+MIT © Happiest

package/dist/components/ChatPanel.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function ChatPanel({ style }: {
+    style?: any;
+}): React.JSX.Element;

package/dist/components/ChatPanel.js

@@ -0,0 +1,241 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { View, Text, TextInput, TouchableOpacity, FlatList, StyleSheet, KeyboardAvoidingView, Platform, Image, Animated, SafeAreaView } from 'react-native';
+import { useHappiestChat } from '../hooks/useHappiestChat';
+const TypingIndicator = () => {
+    const anim1 = useRef(new Animated.Value(0)).current;
+    const anim2 = useRef(new Animated.Value(0)).current;
+    const anim3 = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        const animateDot = (anim, delay) => {
+            Animated.loop(Animated.sequence([
+                Animated.delay(delay),
+                Animated.timing(anim, { toValue: 1, duration: 350, useNativeDriver: true }),
+                Animated.timing(anim, { toValue: 0, duration: 350, useNativeDriver: true }),
+                Animated.delay(700),
+            ])).start();
+        };
+        animateDot(anim1, 0);
+        animateDot(anim2, 160);
+        animateDot(anim3, 320);
+    }, []);
+    return (<View style={styles.typingBubble}>
+      <Animated.View style={[styles.typingDot, { transform: [{ scale: anim1 }] }]}/>
+      <Animated.View style={[styles.typingDot, { transform: [{ scale: anim2 }] }]}/>
+      <Animated.View style={[styles.typingDot, { transform: [{ scale: anim3 }] }]}/>
+    </View>);
+};
+export function ChatPanel({ style }) {
+    const { messages, isTyping, sendMessage, retryMessage, widgetConfig } = useHappiestChat();
+    const [input, setInput] = useState('');
+    const flatListRef = useRef(null);
+    const safeConfig = widgetConfig || {};
+    const primaryColor = safeConfig.theme?.primary || safeConfig.primaryColor || '#0A65CC';
+    const iconUrl = safeConfig.iconUrl;
+    const agentName = safeConfig.agentName || 'Chat Assistant';
+    const clubName = safeConfig.clubName || 'Club';
+    const welcomeMessage = safeConfig.welcomeMessage || 'Hi there! How can I help you today?';
+    const handleSend = () => {
+        if (!input.trim())
+            return;
+        sendMessage(input);
+        setInput('');
+    };
+    const renderItem = ({ item }) => {
+        const isUser = item.isUser;
+        const isFailed = item.status === 'failed';
+        return (<View style={[styles.messageWrapper, isUser ? styles.messageWrapperUser : styles.messageWrapperAgent]}>
+        <View style={isUser ? { alignItems: 'flex-end' } : { alignItems: 'flex-start' }}>
+          <View style={[
+                styles.messageBubble,
+                isUser ? { backgroundColor: isFailed ? '#ef4444' : primaryColor, borderBottomRightRadius: 4 } : { ...styles.messageBubbleAgent, borderBottomLeftRadius: 4 },
+                isFailed && { opacity: 0.9 }
+            ]}>
+            <Text style={isUser ? styles.messageTextUser : styles.messageTextAgent}>
+              {item.text}
+            </Text>
+          </View>
+          {isFailed && (<TouchableOpacity onPress={() => retryMessage(item.id)} style={{ marginTop: 6, flexDirection: 'row', alignItems: 'center' }}>
+              <Text style={{ color: '#ef4444', fontSize: 11, fontWeight: '500' }}>⚠️ Failed to send. Tap to retry</Text>
+            </TouchableOpacity>)}
+        </View>
+      </View>);
+    };
+    const renderHeader = () => (<View style={styles.welcomeWrapper}>
+      <View style={[styles.messageBubble, styles.messageBubbleAgent, { borderBottomLeftRadius: 4 }]}>
+        <Text style={styles.messageTextAgent}>{welcomeMessage}</Text>
+      </View>
+    </View>);
+    return (<SafeAreaView style={[styles.safeArea, { backgroundColor: primaryColor }, style]}>
+      <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+        {/* Header */}
+        <View style={[styles.header, { backgroundColor: primaryColor }]}>
+          <View style={styles.headerInfo}>
+            {iconUrl ? (<Image source={{ uri: iconUrl }} style={styles.headerIcon} resizeMode="cover"/>) : (<View style={styles.headerIconPlaceholder}>
+                <Text style={styles.headerIconText}>{agentName.charAt(0)}</Text>
+              </View>)}
+            <View>
+              <Text style={styles.headerTitle}>{agentName}</Text>
+              <Text style={styles.headerSubtitle}>Powered by Happiest for {clubName}</Text>
+            </View>
+          </View>
+        </View>
+
+        {/* Message List */}
+        <FlatList ref={flatListRef} data={messages} keyExtractor={(item) => item.id} renderItem={renderItem} ListHeaderComponent={renderHeader} contentContainerStyle={styles.listContent} onContentSizeChange={() => flatListRef.current?.scrollToEnd({ animated: true })} onLayout={() => flatListRef.current?.scrollToEnd({ animated: true })} ListFooterComponent={() => isTyping ? <TypingIndicator /> : <View style={{ height: 16 }}/>}/>
+
+        {/* Input Area */}
+        <View style={styles.inputContainer}>
+          <TextInput style={styles.input} value={input} onChangeText={setInput} placeholder="Type your message..." placeholderTextColor="#999" returnKeyType="send" onSubmitEditing={handleSend} underlineColorAndroid="transparent"/>
+          <TouchableOpacity style={[styles.sendButton, { backgroundColor: input.trim() ? primaryColor : '#D1D5DB' }]} onPress={handleSend} disabled={!input.trim()}>
+            <Text style={styles.sendButtonArrow}>➤</Text>
+          </TouchableOpacity>
+        </View>
+      </KeyboardAvoidingView>
+    </SafeAreaView>);
+}
+const styles = StyleSheet.create({
+    safeArea: {
+        flex: 1,
+    },
+    container: {
+        flex: 1,
+        backgroundColor: '#F9FAFB',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 20,
+        paddingTop: Platform.OS === 'ios' ? 20 : 40,
+        justifyContent: 'space-between',
+    },
+    headerInfo: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerIcon: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        marginRight: 12,
+        backgroundColor: '#FFF',
+    },
+    headerIconPlaceholder: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        marginRight: 12,
+        backgroundColor: 'rgba(255,255,255,0.2)',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    headerIconText: {
+        color: '#FFF',
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+    headerTitle: {
+        color: '#FFF',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    headerSubtitle: {
+        color: 'rgba(255,255,255,0.9)',
+        fontSize: 13,
+        marginTop: 2,
+    },
+    listContent: {
+        padding: 20,
+        paddingBottom: 8,
+    },
+    welcomeWrapper: {
+        marginBottom: 12,
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+    },
+    messageWrapper: {
+        marginBottom: 12,
+        flexDirection: 'row',
+    },
+    messageWrapperUser: {
+        justifyContent: 'flex-end',
+    },
+    messageWrapperAgent: {
+        justifyContent: 'flex-start',
+    },
+    messageBubble: {
+        maxWidth: '85%',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderRadius: 12,
+    },
+    messageBubbleAgent: {
+        backgroundColor: '#FFFFFF',
+        borderWidth: 1,
+        borderColor: '#E5E7EB',
+    },
+    messageTextUser: {
+        color: '#FFFFFF',
+        fontSize: 14,
+        lineHeight: 20,
+    },
+    messageTextAgent: {
+        color: '#1F2937',
+        fontSize: 14,
+        lineHeight: 20,
+    },
+    typingBubble: {
+        alignSelf: 'flex-start',
+        backgroundColor: '#FFFFFF',
+        borderWidth: 1,
+        borderColor: '#E5E7EB',
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        borderRadius: 12,
+        borderBottomLeftRadius: 4,
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 16,
+    },
+    typingDot: {
+        width: 6,
+        height: 6,
+        backgroundColor: '#666666',
+        borderRadius: 3,
+        marginHorizontal: 2,
+    },
+    inputContainer: {
+        flexDirection: 'row',
+        padding: 16,
+        backgroundColor: '#FFFFFF',
+        borderTopWidth: 1,
+        borderTopColor: '#E5E7EB',
+        alignItems: 'center',
+    },
+    input: {
+        flex: 1,
+        minHeight: 40,
+        maxHeight: 100,
+        backgroundColor: '#FFFFFF',
+        borderWidth: 1,
+        borderColor: '#E5E7EB',
+        borderRadius: 24,
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+        marginRight: 12,
+        fontSize: 14,
+        color: '#1F2937',
+    },
+    sendButton: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    sendButtonArrow: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        marginLeft: 2,
+        marginTop: -2,
+    },
+});

package/dist/components/HappiestProvider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { HappiestClient, HappiestConfig } from '@happiest-team/ai-chat-core';
+export declare const HappiestContext: React.Context<HappiestClient | null>;
+export interface HappiestProviderProps {
+    config: HappiestConfig;
+    children: React.ReactNode;
+}
+export declare function HappiestProvider({ config, children }: HappiestProviderProps): React.JSX.Element;

package/dist/components/HappiestProvider.js

@@ -0,0 +1,12 @@
+import React, { createContext, useRef } from 'react';
+import { HappiestClient } from '@happiest-team/ai-chat-core';
+export const HappiestContext = createContext(null);
+export function HappiestProvider({ config, children }) {
+    const clientRef = useRef(null);
+    if (!clientRef.current) {
+        clientRef.current = new HappiestClient(config);
+    }
+    return (<HappiestContext.Provider value={clientRef.current}>
+      {children}
+    </HappiestContext.Provider>);
+}

package/dist/hooks/useHappiestChat.d.ts

@@ -0,0 +1,6 @@
+import { HappiestState } from '@happiest-team/ai-chat-core';
+export declare function useHappiestChat(): HappiestState & {
+    sendMessage: (text: string) => void;
+    retryMessage: (id: string) => void;
+    clearSession: () => void;
+};

package/dist/hooks/useHappiestChat.js

@@ -0,0 +1,20 @@
+import { useContext, useEffect, useState } from 'react';
+import { HappiestContext } from '../components/HappiestProvider';
+export function useHappiestChat() {
+    const client = useContext(HappiestContext);
+    if (!client) {
+        throw new Error('useHappiestChat must be used within a HappiestProvider');
+    }
+    const [state, setState] = useState(client.getState());
+    useEffect(() => {
+        const unsubscribe = client.subscribe(setState);
+        client.initSession();
+        return unsubscribe;
+    }, [client]);
+    return {
+        ...state,
+        sendMessage: (text) => client.sendMessage(text),
+        retryMessage: (id) => client.retryMessage(id),
+        clearSession: () => client.clearSession(),
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { HappiestProvider, type HappiestProviderProps, HappiestContext } from './components/HappiestProvider';
+export { ChatPanel } from './components/ChatPanel';
+export { useHappiestChat } from './hooks/useHappiestChat';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { HappiestProvider, HappiestContext } from './components/HappiestProvider';
+export { ChatPanel } from './components/ChatPanel';
+export { useHappiestChat } from './hooks/useHappiestChat';

package/dist/src/components/ChatPanel.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function ChatPanel({ style }: {
+    style?: any;
+}): React.JSX.Element;

package/dist/src/components/ChatPanel.js

@@ -0,0 +1,270 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatPanel = ChatPanel;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const useHappiestChat_1 = require("../hooks/useHappiestChat");
+const TypingIndicator = () => {
+    const anim1 = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const anim2 = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const anim3 = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        const animateDot = (anim, delay) => {
+            react_native_1.Animated.loop(react_native_1.Animated.sequence([
+                react_native_1.Animated.delay(delay),
+                react_native_1.Animated.timing(anim, { toValue: 1, duration: 350, useNativeDriver: true }),
+                react_native_1.Animated.timing(anim, { toValue: 0, duration: 350, useNativeDriver: true }),
+                react_native_1.Animated.delay(700),
+            ])).start();
+        };
+        animateDot(anim1, 0);
+        animateDot(anim2, 160);
+        animateDot(anim3, 320);
+    }, []);
+    return (<react_native_1.View style={styles.typingBubble}>
+      <react_native_1.Animated.View style={[styles.typingDot, { transform: [{ scale: anim1 }] }]}/>
+      <react_native_1.Animated.View style={[styles.typingDot, { transform: [{ scale: anim2 }] }]}/>
+      <react_native_1.Animated.View style={[styles.typingDot, { transform: [{ scale: anim3 }] }]}/>
+    </react_native_1.View>);
+};
+function ChatPanel({ style }) {
+    const { messages, isTyping, sendMessage, widgetConfig } = (0, useHappiestChat_1.useHappiestChat)();
+    const [input, setInput] = (0, react_1.useState)('');
+    const flatListRef = (0, react_1.useRef)(null);
+    const safeConfig = widgetConfig || {};
+    const primaryColor = safeConfig.theme?.primary || safeConfig.primaryColor || '#0A65CC';
+    const iconUrl = safeConfig.iconUrl;
+    const agentName = safeConfig.agentName || 'Chat Assistant';
+    const clubName = safeConfig.clubName || 'Club';
+    const welcomeMessage = safeConfig.welcomeMessage || 'Hi there! How can I help you today?';
+    const handleSend = () => {
+        if (!input.trim())
+            return;
+        sendMessage(input);
+        setInput('');
+    };
+    const renderItem = ({ item }) => {
+        const isUser = item.isUser;
+        return (<react_native_1.View style={[styles.messageWrapper, isUser ? styles.messageWrapperUser : styles.messageWrapperAgent]}>
+        <react_native_1.View style={[
+                styles.messageBubble,
+                isUser ? { backgroundColor: primaryColor, borderBottomRightRadius: 4 } : { ...styles.messageBubbleAgent, borderBottomLeftRadius: 4 }
+            ]}>
+          <react_native_1.Text style={isUser ? styles.messageTextUser : styles.messageTextAgent}>
+            {item.text}
+          </react_native_1.Text>
+        </react_native_1.View>
+      </react_native_1.View>);
+    };
+    const renderHeader = () => (<react_native_1.View style={styles.welcomeWrapper}>
+      <react_native_1.View style={[styles.messageBubble, styles.messageBubbleAgent, { borderBottomLeftRadius: 4 }]}>
+        <react_native_1.Text style={styles.messageTextAgent}>{welcomeMessage}</react_native_1.Text>
+      </react_native_1.View>
+    </react_native_1.View>);
+    return (<react_native_1.SafeAreaView style={[styles.safeArea, { backgroundColor: primaryColor }, style]}>
+      <react_native_1.KeyboardAvoidingView style={styles.container} behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : undefined}>
+        {/* Header */}
+        <react_native_1.View style={[styles.header, { backgroundColor: primaryColor }]}>
+          <react_native_1.View style={styles.headerInfo}>
+            {iconUrl ? (<react_native_1.Image source={{ uri: iconUrl }} style={styles.headerIcon} resizeMode="cover"/>) : (<react_native_1.View style={styles.headerIconPlaceholder}>
+                <react_native_1.Text style={styles.headerIconText}>{agentName.charAt(0)}</react_native_1.Text>
+              </react_native_1.View>)}
+            <react_native_1.View>
+              <react_native_1.Text style={styles.headerTitle}>{agentName}</react_native_1.Text>
+              <react_native_1.Text style={styles.headerSubtitle}>Powered by Happiest for {clubName}</react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        {/* Message List */}
+        <react_native_1.FlatList ref={flatListRef} data={messages} keyExtractor={(item) => item.id} renderItem={renderItem} ListHeaderComponent={renderHeader} contentContainerStyle={styles.listContent} onContentSizeChange={() => flatListRef.current?.scrollToEnd({ animated: true })} onLayout={() => flatListRef.current?.scrollToEnd({ animated: true })} ListFooterComponent={() => isTyping ? <TypingIndicator /> : <react_native_1.View style={{ height: 16 }}/>}/>
+
+        {/* Input Area */}
+        <react_native_1.View style={styles.inputContainer}>
+          <react_native_1.TextInput style={styles.input} value={input} onChangeText={setInput} placeholder="Type your message..." placeholderTextColor="#999" returnKeyType="send" onSubmitEditing={handleSend} underlineColorAndroid="transparent"/>
+          <react_native_1.TouchableOpacity style={[styles.sendButton, { backgroundColor: input.trim() ? primaryColor : '#D1D5DB' }]} onPress={handleSend} disabled={!input.trim()}>
+            <react_native_1.Text style={styles.sendButtonArrow}>➤</react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+        </react_native_1.View>
+      </react_native_1.KeyboardAvoidingView>
+    </react_native_1.SafeAreaView>);
+}
+const styles = react_native_1.StyleSheet.create({
+    safeArea: {
+        flex: 1,
+    },
+    container: {
+        flex: 1,
+        backgroundColor: '#F9FAFB',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 20,
+        paddingTop: react_native_1.Platform.OS === 'ios' ? 20 : 40,
+        justifyContent: 'space-between',
+    },
+    headerInfo: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerIcon: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        marginRight: 12,
+        backgroundColor: '#FFF',
+    },
+    headerIconPlaceholder: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        marginRight: 12,
+        backgroundColor: 'rgba(255,255,255,0.2)',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    headerIconText: {
+        color: '#FFF',
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+    headerTitle: {
+        color: '#FFF',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    headerSubtitle: {
+        color: 'rgba(255,255,255,0.9)',
+        fontSize: 13,
+        marginTop: 2,
+    },
+    listContent: {
+        padding: 20,
+        paddingBottom: 8,
+    },
+    welcomeWrapper: {
+        marginBottom: 12,
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+    },
+    messageWrapper: {
+        marginBottom: 12,
+        flexDirection: 'row',
+    },
+    messageWrapperUser: {
+        justifyContent: 'flex-end',
+    },
+    messageWrapperAgent: {
+        justifyContent: 'flex-start',
+    },
+    messageBubble: {
+        maxWidth: '85%',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderRadius: 12,
+    },
+    messageBubbleAgent: {
+        backgroundColor: '#FFFFFF',
+        borderWidth: 1,
+        borderColor: '#E5E7EB',
+    },
+    messageTextUser: {
+        color: '#FFFFFF',
+        fontSize: 14,
+        lineHeight: 20,
+    },
+    messageTextAgent: {
+        color: '#1F2937',
+        fontSize: 14,
+        lineHeight: 20,
+    },
+    typingBubble: {
+        alignSelf: 'flex-start',
+        backgroundColor: '#FFFFFF',
+        borderWidth: 1,
+        borderColor: '#E5E7EB',
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        borderRadius: 12,
+        borderBottomLeftRadius: 4,
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 16,
+    },
+    typingDot: {
+        width: 6,
+        height: 6,
+        backgroundColor: '#666666',
+        borderRadius: 3,
+        marginHorizontal: 2,
+    },
+    inputContainer: {
+        flexDirection: 'row',
+        padding: 16,
+        backgroundColor: '#FFFFFF',
+        borderTopWidth: 1,
+        borderTopColor: '#E5E7EB',
+        alignItems: 'center',
+    },
+    input: {
+        flex: 1,
+        minHeight: 40,
+        maxHeight: 100,
+        backgroundColor: '#FFFFFF',
+        borderWidth: 1,
+        borderColor: '#E5E7EB',
+        borderRadius: 24,
+        paddingHorizontal: 16,
+        paddingVertical: 10,
+        marginRight: 12,
+        fontSize: 14,
+        color: '#1F2937',
+    },
+    sendButton: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    sendButtonArrow: {
+        color: '#FFFFFF',
+        fontSize: 16,
+        marginLeft: 2,
+        marginTop: -2,
+    },
+});

package/dist/src/components/HappiestProvider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { HappiestConfig } from '@happiest/chat-core';
+export declare const HappiestContext: React.Context<any>;
+export interface HappiestProviderProps {
+    config: HappiestConfig;
+    children: React.ReactNode;
+}
+export declare function HappiestProvider({ config, children }: HappiestProviderProps): React.JSX.Element;

package/dist/src/components/HappiestProvider.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HappiestContext = void 0;
+exports.HappiestProvider = HappiestProvider;
+const react_1 = __importStar(require("react"));
+const chat_core_1 = require("@happiest/chat-core");
+exports.HappiestContext = (0, react_1.createContext)(null);
+function HappiestProvider({ config, children }) {
+    const clientRef = (0, react_1.useRef)(null);
+    if (!clientRef.current) {
+        clientRef.current = new chat_core_1.HappiestClient(config);
+    }
+    return (<exports.HappiestContext.Provider value={clientRef.current}>
+      {children}
+    </exports.HappiestContext.Provider>);
+}

package/dist/src/hooks/useHappiestChat.d.ts

@@ -0,0 +1,5 @@
+import { HappiestState } from '@happiest/chat-core';
+export declare function useHappiestChat(): HappiestState & {
+    sendMessage: (text: string) => void;
+    clearSession: () => void;
+};

package/dist/src/hooks/useHappiestChat.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHappiestChat = useHappiestChat;
+const react_1 = require("react");
+const HappiestProvider_1 = require("../components/HappiestProvider");
+function useHappiestChat() {
+    const client = (0, react_1.useContext)(HappiestProvider_1.HappiestContext);
+    if (!client) {
+        throw new Error('useHappiestChat must be used within a HappiestProvider');
+    }
+    const [state, setState] = (0, react_1.useState)(client.getState());
+    (0, react_1.useEffect)(() => {
+        const unsubscribe = client.subscribe(setState);
+        client.initSession();
+        return unsubscribe;
+    }, [client]);
+    return {
+        ...state,
+        sendMessage: (text) => client.sendMessage(text),
+        clearSession: () => client.clearSession(),
+    };
+}

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export { HappiestProvider, type HappiestProviderProps, HappiestContext } from './components/HappiestProvider';
+export { ChatPanel } from './components/ChatPanel';
+export { useHappiestChat } from './hooks/useHappiestChat';

package/dist/src/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHappiestChat = exports.ChatPanel = exports.HappiestContext = exports.HappiestProvider = void 0;
+var HappiestProvider_1 = require("./components/HappiestProvider");
+Object.defineProperty(exports, "HappiestProvider", { enumerable: true, get: function () { return HappiestProvider_1.HappiestProvider; } });
+Object.defineProperty(exports, "HappiestContext", { enumerable: true, get: function () { return HappiestProvider_1.HappiestContext; } });
+var ChatPanel_1 = require("./components/ChatPanel");
+Object.defineProperty(exports, "ChatPanel", { enumerable: true, get: function () { return ChatPanel_1.ChatPanel; } });
+var useHappiestChat_1 = require("./hooks/useHappiestChat");
+Object.defineProperty(exports, "useHappiestChat", { enumerable: true, get: function () { return useHappiestChat_1.useHappiestChat; } });

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@happiest-team/ai-chat-native",
+  "version": "1.0.1",
+  "description": "React Native SDK for Happiest Chat",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc"
+  },
+  "keywords": [
+    "happiest",
+    "chat",
+    "ai",
+    "agent",
+    "react-native",
+    "mobile"
+  ],
+  "author": "Happiest",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "package.json"
+  ],
+  "dependencies": {
+    "@happiest-team/ai-chat-core": "*"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.17",
+    "@types/react-native": "^0.73.0",
+    "react": "^19.2.7",
+    "react-native": "^0.86.0",
+    "typescript": "^5.5.0"
+  }
+}