react-native-ragged-chat 1.0.3

package/dist/ChatBubble.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ChatConfigResponse, RaggedConfig } from './types';
+interface ChatBubbleProps {
+    onPress: () => void;
+    isOpen: boolean;
+    config: RaggedConfig;
+    serverConfig: ChatConfigResponse | null;
+}
+export declare const ChatBubble: React.FC<ChatBubbleProps>;
+export {};

package/dist/ChatBubble.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChatBubble = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = require("react-native-svg");
+const ChatBubble = ({ onPress, isOpen, config, serverConfig, }) => {
+    const primaryColor = serverConfig?.settings?.primaryColor || config.primaryColor || '#000000';
+    const shape = serverConfig?.settings?.widgetShape || config.widgetShape || 'circle';
+    const size = serverConfig?.settings?.widgetSize || config.widgetSize || 'medium';
+    const getSize = () => {
+        switch (size) {
+            case 'small':
+                return 48;
+            case 'large':
+                return 68;
+            case 'medium':
+            default:
+                return 56;
+        }
+    };
+    const bubbleSize = getSize();
+    const iconSize = size === 'small' ? 24 : size === 'large' ? 32 : 28;
+    const styles = react_native_1.StyleSheet.create({
+        bubble: {
+            width: bubbleSize,
+            height: bubbleSize,
+            backgroundColor: isOpen ? '#000000' : primaryColor,
+            justifyContent: 'center',
+            alignItems: 'center',
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 4 },
+            shadowOpacity: 0.3,
+            shadowRadius: 4,
+            elevation: 5,
+        },
+        circle: {
+            borderRadius: bubbleSize / 2,
+        },
+        roundedSquare: {
+            borderRadius: 16,
+        },
+    });
+    return (<react_native_1.TouchableOpacity activeOpacity={0.8} onPress={onPress} style={[
+            styles.bubble,
+            shape === 'circle' ? styles.circle : styles.roundedSquare,
+        ]}>
+            {isOpen ? (<react_native_svg_1.Svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+                    <react_native_svg_1.Line x1="18" y1="6" x2="6" y2="18"/>
+                    <react_native_svg_1.Line x1="6" y1="6" x2="18" y2="18"/>
+                </react_native_svg_1.Svg>) : serverConfig?.settings?.brandLogo ? (<react_native_1.Image source={{ uri: serverConfig.settings.brandLogo }} style={{ width: iconSize, height: iconSize, borderRadius: iconSize / 2 }} resizeMode="cover"/>) : (<react_native_svg_1.Svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+                    <react_native_svg_1.Path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                </react_native_svg_1.Svg>)}
+        </react_native_1.TouchableOpacity>);
+};
+exports.ChatBubble = ChatBubble;

package/dist/ChatWindow.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Message, ChatConfigResponse, RaggedConfig } from './types';
+interface ChatWindowProps {
+    onClose: () => void;
+    config: RaggedConfig;
+    serverConfig: ChatConfigResponse | null;
+    messages: Message[];
+    isLoading: boolean;
+    onSendMessage: (msg: string) => void;
+}
+export declare const ChatWindow: React.FC<ChatWindowProps>;
+export {};

package/dist/ChatWindow.js

@@ -0,0 +1,258 @@
+"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.ChatWindow = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = require("react-native-svg");
+const ChatWindow = ({ onClose, config, serverConfig, messages, isLoading, onSendMessage, }) => {
+    const [inputText, setInputText] = (0, react_1.useState)('');
+    const scrollViewRef = (0, react_1.useRef)(null);
+    const primaryColor = serverConfig?.settings?.primaryColor || config.primaryColor || '#3b82f6';
+    const chatTitle = serverConfig?.name || 'AI Agent';
+    const welcomeMessage = serverConfig?.settings?.welcomeMessage || 'How can I help you?';
+    const placeholderText = serverConfig?.settings?.placeholder || 'Type your message here...';
+    (0, react_1.useEffect)(() => {
+        scrollViewRef.current?.scrollToEnd({ animated: true });
+    }, [messages, isLoading]);
+    const handleSend = () => {
+        if (inputText.trim() && !isLoading) {
+            onSendMessage(inputText.trim());
+            setInputText('');
+        }
+    };
+    return (<react_native_1.KeyboardAvoidingView behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.container}>
+            <react_native_1.View style={styles.header}>
+                <react_native_1.View style={styles.headerLeft}>
+                    <react_native_1.View style={styles.avatar}>
+                        {serverConfig?.settings?.brandLogo ? (<react_native_1.Image source={{ uri: serverConfig.settings.brandLogo }} style={{ width: '100%', height: '100%', borderRadius: 16 }} resizeMode="cover"/>) : (<react_native_svg_1.Svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="black" strokeWidth="2">
+                                <react_native_svg_1.Path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                            </react_native_svg_1.Svg>)}
+                    </react_native_1.View>
+                    <react_native_1.View>
+                        <react_native_1.Text style={styles.title}>{chatTitle}</react_native_1.Text>
+                        <react_native_1.Text style={styles.status}>ONLINE</react_native_1.Text>
+                    </react_native_1.View>
+                </react_native_1.View>
+                <react_native_1.TouchableOpacity onPress={onClose} style={styles.closeBtn}>
+                    <react_native_svg_1.Svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="black" strokeWidth="2">
+                        <react_native_svg_1.Line x1="18" y1="6" x2="6" y2="18"/>
+                        <react_native_svg_1.Line x1="6" y1="6" x2="18" y2="18"/>
+                    </react_native_svg_1.Svg>
+                </react_native_1.TouchableOpacity>
+            </react_native_1.View>
+
+            <react_native_1.ScrollView ref={scrollViewRef} style={styles.messagesContainer} contentContainerStyle={styles.messagesContent}>
+                {messages.length === 0 ? (<react_native_1.View style={styles.emptyState}>
+                        <react_native_1.View style={styles.emptyIcon}>
+                            <react_native_svg_1.Svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#71717a" strokeWidth="2">
+                                <react_native_svg_1.Path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                            </react_native_svg_1.Svg>
+                        </react_native_1.View>
+                        <react_native_1.Text style={styles.emptyTitle}>{welcomeMessage}</react_native_1.Text>
+                    </react_native_1.View>) : (messages.map((msg, index) => (<react_native_1.View key={index} style={[
+                styles.messageRow,
+                msg.role === 'user' ? styles.userRow : styles.assistantRow,
+            ]}>
+                            <react_native_1.View style={[
+                styles.messageBubble,
+                msg.role === 'user' ? { backgroundColor: primaryColor } : styles.assistantBubble,
+            ]}>
+                                <react_native_1.Text style={[
+                styles.messageText,
+                msg.role === 'user' ? styles.userText : styles.assistantText,
+            ]}>
+                                    {msg.content}
+                                </react_native_1.Text>
+                            </react_native_1.View>
+                        </react_native_1.View>)))}
+                {isLoading && (<react_native_1.View style={[styles.messageRow, styles.assistantRow]}>
+                        <react_native_1.View style={[styles.messageBubble, styles.assistantBubble]}>
+                            <react_native_1.ActivityIndicator color="#fff" size="small"/>
+                        </react_native_1.View>
+                    </react_native_1.View>)}
+            </react_native_1.ScrollView>
+
+            <react_native_1.View style={styles.inputContainer}>
+                <react_native_1.TextInput style={styles.input} placeholder={placeholderText} placeholderTextColor="#52525b" value={inputText} onChangeText={setInputText} onSubmitEditing={handleSend} returnKeyType="send"/>
+                <react_native_1.TouchableOpacity style={[styles.sendBtn, { backgroundColor: primaryColor, opacity: isLoading || !inputText.trim() ? 0.5 : 1 }]} onPress={handleSend} disabled={isLoading || !inputText.trim()}>
+                    <react_native_1.Text style={styles.sendBtnText}>Send</react_native_1.Text>
+                    <react_native_svg_1.Svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+                        <react_native_svg_1.Line x1="22" y1="2" x2="11" y2="13"/>
+                        <react_native_svg_1.Polygon points="22 2 15 22 11 13 2 9 22 2"/>
+                    </react_native_svg_1.Svg>
+                </react_native_1.TouchableOpacity>
+            </react_native_1.View>
+        </react_native_1.KeyboardAvoidingView>);
+};
+exports.ChatWindow = ChatWindow;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'rgba(9, 9, 11, 0.95)',
+        borderRadius: 24,
+        overflow: 'hidden',
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.1)',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: 16,
+        backgroundColor: 'white',
+        borderBottomWidth: 1,
+        borderBottomColor: 'rgba(0,0,0,0.1)',
+    },
+    headerLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    avatar: {
+        width: 32,
+        height: 32,
+        backgroundColor: '#f4f4f5',
+        borderRadius: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 12,
+    },
+    title: {
+        fontWeight: '700',
+        fontSize: 14,
+        color: 'black',
+    },
+    status: {
+        fontSize: 10,
+        fontWeight: '700',
+        color: '#71717a',
+        marginTop: 2,
+    },
+    closeBtn: {
+        padding: 8,
+    },
+    messagesContainer: {
+        flex: 1,
+    },
+    messagesContent: {
+        padding: 16,
+        gap: 16,
+    },
+    emptyState: {
+        alignItems: 'center',
+        paddingTop: 40,
+    },
+    emptyIcon: {
+        width: 64,
+        height: 64,
+        backgroundColor: 'rgba(255,255,255,0.05)',
+        borderRadius: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 16,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.1)',
+    },
+    emptyTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: '#e4e4e7',
+        textAlign: 'center',
+    },
+    messageRow: {
+        flexDirection: 'row',
+        marginBottom: 16,
+    },
+    userRow: {
+        justifyContent: 'flex-end',
+    },
+    assistantRow: {
+        justifyContent: 'flex-start',
+    },
+    messageBubble: {
+        maxWidth: '85%',
+        padding: 14,
+        borderRadius: 16,
+    },
+    assistantBubble: {
+        backgroundColor: 'rgba(39, 39, 42, 0.8)',
+        borderTopLeftRadius: 4,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.1)',
+    },
+    messageText: {
+        fontSize: 14,
+        lineHeight: 20,
+        fontWeight: '500',
+    },
+    userText: {
+        color: 'white',
+    },
+    assistantText: {
+        color: '#fafafa',
+    },
+    inputContainer: {
+        flexDirection: 'row',
+        padding: 16,
+        backgroundColor: 'rgba(24, 24, 27, 0.5)',
+        borderTopWidth: 1,
+        borderTopColor: 'rgba(255,255,255,0.05)',
+    },
+    input: {
+        flex: 1,
+        backgroundColor: 'rgba(39, 39, 42, 0.5)',
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.1)',
+        borderRadius: 16,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        color: 'white',
+        fontSize: 14,
+        marginRight: 10,
+    },
+    sendBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderRadius: 16,
+        justifyContent: 'center',
+    },
+    sendBtnText: {
+        color: 'white',
+        fontWeight: '600',
+        marginRight: 6,
+    },
+});

package/dist/RaggedWidget.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { RaggedConfig } from './types';
+interface RaggedWidgetProps {
+    config: RaggedConfig;
+}
+export declare const RaggedWidget: React.FC<RaggedWidgetProps>;
+export {};

package/dist/RaggedWidget.js

@@ -0,0 +1,124 @@
+"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.RaggedWidget = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const ChatBubble_1 = require("./ChatBubble");
+const ChatWindow_1 = require("./ChatWindow");
+const { height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
+const RaggedWidget = ({ config }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [serverConfig, setServerConfig] = (0, react_1.useState)(null);
+    const [messages, setMessages] = (0, react_1.useState)([]);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const API_URL = config.apiUrl || 'https://ragflowdb.onrender.com/api';
+    const fetchConfig = (0, react_1.useCallback)(async () => {
+        try {
+            const response = await fetch(`${API_URL}/chat/${config.subdomain}/config`);
+            const data = await response.json();
+            setServerConfig(data);
+        }
+        catch (error) {
+            console.warn('[Ragged SDK] Failed to fetch config:', error);
+        }
+    }, [API_URL, config.subdomain]);
+    (0, react_1.useEffect)(() => {
+        fetchConfig();
+    }, [fetchConfig]);
+    const sendMessage = async (messageText) => {
+        setMessages(prev => [...prev, { role: 'user', content: messageText }]);
+        setIsLoading(true);
+        try {
+            const response = await fetch(`${API_URL}/chat/${config.subdomain}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ message: messageText, history: messages }),
+            });
+            const data = await response.json();
+            setMessages(prev => [...prev, { role: 'assistant', content: data.response }]);
+        }
+        catch (error) {
+            console.warn('[Ragged SDK] Failed to send message:', error);
+            setMessages(prev => [
+                ...prev,
+                { role: 'assistant', content: "Sorry, I'm having trouble connecting right now." },
+            ]);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const toggleOpen = () => setIsOpen(!isOpen);
+    return (<react_native_1.View style={styles.container} pointerEvents="box-none">
+            {isOpen && (<react_native_1.View style={styles.chatWindowContainer}>
+                    <ChatWindow_1.ChatWindow onClose={() => setIsOpen(false)} config={config} serverConfig={serverConfig} messages={messages} isLoading={isLoading} onSendMessage={sendMessage}/>
+                </react_native_1.View>)}
+            <react_native_1.View style={styles.bubbleContainer}>
+                <ChatBubble_1.ChatBubble onPress={toggleOpen} isOpen={isOpen} config={config} serverConfig={serverConfig}/>
+            </react_native_1.View>
+        </react_native_1.View>);
+};
+exports.RaggedWidget = RaggedWidget;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        zIndex: 999999,
+        flexDirection: 'column',
+        justifyContent: 'flex-end',
+        alignItems: 'flex-end',
+    },
+    chatWindowContainer: {
+        position: 'absolute',
+        bottom: 96,
+        right: 24,
+        left: react_native_1.Platform.OS === 'web' ? undefined : 24,
+        width: react_native_1.Platform.OS === 'web' ? 380 : 'auto',
+        height: Math.min(SCREEN_HEIGHT - 140, 540),
+        maxWidth: react_native_1.Platform.OS === 'web' ? undefined : 500,
+        backgroundColor: 'transparent',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 20 },
+        shadowOpacity: 0.4,
+        shadowRadius: 25,
+        elevation: 10,
+        borderRadius: 24,
+    },
+    bubbleContainer: {
+        position: 'absolute',
+        bottom: 24,
+        right: 24,
+    },
+});

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { RaggedWidget } from './RaggedWidget';
+export type { RaggedConfig, Message, ChatConfigResponse } from './types';

package/dist/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RaggedWidget = void 0;
+var RaggedWidget_1 = require("./RaggedWidget");
+Object.defineProperty(exports, "RaggedWidget", { enumerable: true, get: function () { return RaggedWidget_1.RaggedWidget; } });

package/dist/types.d.ts

@@ -0,0 +1,22 @@
+export interface RaggedConfig {
+    subdomain: string;
+    apiUrl?: string;
+    widgetShape?: 'circle' | 'rounded-square';
+    widgetSize?: 'small' | 'medium' | 'large';
+    primaryColor?: string;
+}
+export interface Message {
+    role: 'user' | 'assistant';
+    content: string;
+}
+export interface ChatConfigResponse {
+    name: string;
+    settings: {
+        primaryColor: string;
+        placeholder: string;
+        welcomeMessage: string;
+        widgetShape: 'circle' | 'rounded-square';
+        widgetSize: 'small' | 'medium' | 'large';
+        brandLogo?: string;
+    };
+}

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,35 @@
+{
+    "name": "react-native-ragged-chat",
+    "version": "1.0.3",
+    "description": "Ragged Chat SDK for React Native and Expo",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "scripts": {
+        "build": "tsc",
+        "prepublishOnly": "npm run build"
+    },
+    "keywords": [
+        "react-native",
+        "expo",
+        "ragged",
+        "chat",
+        "widget",
+        "sdk"
+    ],
+    "author": "Ragged",
+    "license": "ISC",
+    "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-webview": "*"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.0",
+        "@types/react-native": "^0.72.0",
+        "typescript": "^5.0.0"
+    },
+    "dependencies": {
+        "react-native-safe-area-context": "^4.0.0",
+        "react-native-svg": "^15.15.3"
+    }
+}

package/src/ChatBubble.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { TouchableOpacity, StyleSheet, View, Image } from 'react-native';
+import { Svg, Path, Rect, Line } from 'react-native-svg';
+import { ChatConfigResponse, RaggedConfig } from './types';
+
+interface ChatBubbleProps {
+    onPress: () => void;
+    isOpen: boolean;
+    config: RaggedConfig;
+    serverConfig: ChatConfigResponse | null;
+}
+
+export const ChatBubble: React.FC<ChatBubbleProps> = ({
+    onPress,
+    isOpen,
+    config,
+    serverConfig,
+}) => {
+    const primaryColor =
+        serverConfig?.settings?.primaryColor || config.primaryColor || '#000000';
+    const shape = serverConfig?.settings?.widgetShape || config.widgetShape || 'circle';
+    const size = serverConfig?.settings?.widgetSize || config.widgetSize || 'medium';
+
+    const getSize = () => {
+        switch (size) {
+            case 'small':
+                return 48;
+            case 'large':
+                return 68;
+            case 'medium':
+            default:
+                return 56;
+        }
+    };
+
+    const bubbleSize = getSize();
+    const iconSize = size === 'small' ? 24 : size === 'large' ? 32 : 28;
+
+    const styles = StyleSheet.create({
+        bubble: {
+            width: bubbleSize,
+            height: bubbleSize,
+            backgroundColor: isOpen ? '#000000' : primaryColor,
+            justifyContent: 'center',
+            alignItems: 'center',
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 4 },
+            shadowOpacity: 0.3,
+            shadowRadius: 4,
+            elevation: 5,
+        },
+        circle: {
+            borderRadius: bubbleSize / 2,
+        },
+        roundedSquare: {
+            borderRadius: 16,
+        },
+    });
+
+    return (
+        <TouchableOpacity
+            activeOpacity={0.8}
+            onPress={onPress}
+            style={[
+                styles.bubble,
+                shape === 'circle' ? styles.circle : styles.roundedSquare,
+            ]}
+        >
+            {isOpen ? (
+                <Svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+                    <Line x1="18" y1="6" x2="6" y2="18" />
+                    <Line x1="6" y1="6" x2="18" y2="18" />
+                </Svg>
+            ) : serverConfig?.settings?.brandLogo ? (
+                <Image
+                    source={{ uri: serverConfig.settings.brandLogo }}
+                    style={{ width: iconSize, height: iconSize, borderRadius: iconSize / 2 }}
+                    resizeMode="cover"
+                />
+            ) : (
+                <Svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+                    <Path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+                </Svg>
+            )}
+        </TouchableOpacity>
+    );
+};

package/src/ChatWindow.tsx

@@ -0,0 +1,300 @@
+import React, { useState, useRef, useEffect } from 'react';
+import {
+    View,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    ScrollView,
+    StyleSheet,
+    ActivityIndicator,
+    KeyboardAvoidingView,
+    Platform,
+    Image,
+} from 'react-native';
+import { Svg, Path, Line, Polygon } from 'react-native-svg';
+import { Message, ChatConfigResponse, RaggedConfig } from './types';
+
+interface ChatWindowProps {
+    onClose: () => void;
+    config: RaggedConfig;
+    serverConfig: ChatConfigResponse | null;
+    messages: Message[];
+    isLoading: boolean;
+    onSendMessage: (msg: string) => void;
+}
+
+export const ChatWindow: React.FC<ChatWindowProps> = ({
+    onClose,
+    config,
+    serverConfig,
+    messages,
+    isLoading,
+    onSendMessage,
+}) => {
+    const [inputText, setInputText] = useState('');
+    const scrollViewRef = useRef<ScrollView>(null);
+
+    const primaryColor =
+        serverConfig?.settings?.primaryColor || config.primaryColor || '#3b82f6';
+    const chatTitle = serverConfig?.name || 'AI Agent';
+    const welcomeMessage = serverConfig?.settings?.welcomeMessage || 'How can I help you?';
+    const placeholderText = serverConfig?.settings?.placeholder || 'Type your message here...';
+
+    useEffect(() => {
+        scrollViewRef.current?.scrollToEnd({ animated: true });
+    }, [messages, isLoading]);
+
+    const handleSend = () => {
+        if (inputText.trim() && !isLoading) {
+            onSendMessage(inputText.trim());
+            setInputText('');
+        }
+    };
+
+    return (
+        <KeyboardAvoidingView
+            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+            style={styles.container}
+        >
+            <View style={styles.header}>
+                <View style={styles.headerLeft}>
+                    <View style={styles.avatar}>
+                        {serverConfig?.settings?.brandLogo ? (
+                            <Image
+                                source={{ uri: serverConfig.settings.brandLogo }}
+                                style={{ width: '100%', height: '100%', borderRadius: 16 }}
+                                resizeMode="cover"
+                            />
+                        ) : (
+                            <Svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="black" strokeWidth="2">
+                                <Path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+                            </Svg>
+                        )}
+                    </View>
+                    <View>
+                        <Text style={styles.title}>{chatTitle}</Text>
+                        <Text style={styles.status}>ONLINE</Text>
+                    </View>
+                </View>
+                <TouchableOpacity onPress={onClose} style={styles.closeBtn}>
+                    <Svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="black" strokeWidth="2">
+                        <Line x1="18" y1="6" x2="6" y2="18" />
+                        <Line x1="6" y1="6" x2="18" y2="18" />
+                    </Svg>
+                </TouchableOpacity>
+            </View>
+
+            <ScrollView
+                ref={scrollViewRef}
+                style={styles.messagesContainer}
+                contentContainerStyle={styles.messagesContent}
+            >
+                {messages.length === 0 ? (
+                    <View style={styles.emptyState}>
+                        <View style={styles.emptyIcon}>
+                            <Svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#71717a" strokeWidth="2">
+                                <Path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+                            </Svg>
+                        </View>
+                        <Text style={styles.emptyTitle}>{welcomeMessage}</Text>
+                    </View>
+                ) : (
+                    messages.map((msg, index) => (
+                        <View
+                            key={index}
+                            style={[
+                                styles.messageRow,
+                                msg.role === 'user' ? styles.userRow : styles.assistantRow,
+                            ]}
+                        >
+                            <View
+                                style={[
+                                    styles.messageBubble,
+                                    msg.role === 'user' ? { backgroundColor: primaryColor } : styles.assistantBubble,
+                                ]}
+                            >
+                                <Text
+                                    style={[
+                                        styles.messageText,
+                                        msg.role === 'user' ? styles.userText : styles.assistantText,
+                                    ]}
+                                >
+                                    {msg.content}
+                                </Text>
+                            </View>
+                        </View>
+                    ))
+                )}
+                {isLoading && (
+                    <View style={[styles.messageRow, styles.assistantRow]}>
+                        <View style={[styles.messageBubble, styles.assistantBubble]}>
+                            <ActivityIndicator color="#fff" size="small" />
+                        </View>
+                    </View>
+                )}
+            </ScrollView>
+
+            <View style={styles.inputContainer}>
+                <TextInput
+                    style={styles.input}
+                    placeholder={placeholderText}
+                    placeholderTextColor="#52525b"
+                    value={inputText}
+                    onChangeText={setInputText}
+                    onSubmitEditing={handleSend}
+                    returnKeyType="send"
+                />
+                <TouchableOpacity
+                    style={[styles.sendBtn, { backgroundColor: primaryColor, opacity: isLoading || !inputText.trim() ? 0.5 : 1 }]}
+                    onPress={handleSend}
+                    disabled={isLoading || !inputText.trim()}
+                >
+                    <Text style={styles.sendBtnText}>Send</Text>
+                    <Svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2">
+                        <Line x1="22" y1="2" x2="11" y2="13" />
+                        <Polygon points="22 2 15 22 11 13 2 9 22 2" />
+                    </Svg>
+                </TouchableOpacity>
+            </View>
+        </KeyboardAvoidingView>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: 'rgba(9, 9, 11, 0.95)',
+        borderRadius: 24,
+        overflow: 'hidden',
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.1)',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: 16,
+        backgroundColor: 'white',
+        borderBottomWidth: 1,
+        borderBottomColor: 'rgba(0,0,0,0.1)',
+    },
+    headerLeft: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    avatar: {
+        width: 32,
+        height: 32,
+        backgroundColor: '#f4f4f5',
+        borderRadius: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 12,
+    },
+    title: {
+        fontWeight: '700',
+        fontSize: 14,
+        color: 'black',
+    },
+    status: {
+        fontSize: 10,
+        fontWeight: '700',
+        color: '#71717a',
+        marginTop: 2,
+    },
+    closeBtn: {
+        padding: 8,
+    },
+    messagesContainer: {
+        flex: 1,
+    },
+    messagesContent: {
+        padding: 16,
+        gap: 16,
+    },
+    emptyState: {
+        alignItems: 'center',
+        paddingTop: 40,
+    },
+    emptyIcon: {
+        width: 64,
+        height: 64,
+        backgroundColor: 'rgba(255,255,255,0.05)',
+        borderRadius: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginBottom: 16,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.1)',
+    },
+    emptyTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        color: '#e4e4e7',
+        textAlign: 'center',
+    },
+    messageRow: {
+        flexDirection: 'row',
+        marginBottom: 16,
+    },
+    userRow: {
+        justifyContent: 'flex-end',
+    },
+    assistantRow: {
+        justifyContent: 'flex-start',
+    },
+    messageBubble: {
+        maxWidth: '85%',
+        padding: 14,
+        borderRadius: 16,
+    },
+    assistantBubble: {
+        backgroundColor: 'rgba(39, 39, 42, 0.8)',
+        borderTopLeftRadius: 4,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.1)',
+    },
+    messageText: {
+        fontSize: 14,
+        lineHeight: 20,
+        fontWeight: '500',
+    },
+    userText: {
+        color: 'white',
+    },
+    assistantText: {
+        color: '#fafafa',
+    },
+    inputContainer: {
+        flexDirection: 'row',
+        padding: 16,
+        backgroundColor: 'rgba(24, 24, 27, 0.5)',
+        borderTopWidth: 1,
+        borderTopColor: 'rgba(255,255,255,0.05)',
+    },
+    input: {
+        flex: 1,
+        backgroundColor: 'rgba(39, 39, 42, 0.5)',
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.1)',
+        borderRadius: 16,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        color: 'white',
+        fontSize: 14,
+        marginRight: 10,
+    },
+    sendBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        borderRadius: 16,
+        justifyContent: 'center',
+    },
+    sendBtnText: {
+        color: 'white',
+        fontWeight: '600',
+        marginRight: 6,
+    },
+});

package/src/RaggedWidget.tsx

@@ -0,0 +1,115 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { View, StyleSheet, Dimensions, Platform } from 'react-native';
+import { ChatBubble } from './ChatBubble';
+import { ChatWindow } from './ChatWindow';
+import { RaggedConfig, ChatConfigResponse, Message } from './types';
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+interface RaggedWidgetProps {
+    config: RaggedConfig;
+}
+
+export const RaggedWidget: React.FC<RaggedWidgetProps> = ({ config }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [serverConfig, setServerConfig] = useState<ChatConfigResponse | null>(null);
+    const [messages, setMessages] = useState<Message[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const API_URL = config.apiUrl || 'https://ragflowdb.onrender.com/api';
+
+    const fetchConfig = useCallback(async () => {
+        try {
+            const response = await fetch(`${API_URL}/chat/${config.subdomain}/config`);
+            const data = await response.json();
+            setServerConfig(data);
+        } catch (error) {
+            console.warn('[Ragged SDK] Failed to fetch config:', error);
+        }
+    }, [API_URL, config.subdomain]);
+
+    useEffect(() => {
+        fetchConfig();
+    }, [fetchConfig]);
+
+    const sendMessage = async (messageText: string) => {
+        setMessages(prev => [...prev, { role: 'user', content: messageText }]);
+        setIsLoading(true);
+
+        try {
+            const response = await fetch(`${API_URL}/chat/${config.subdomain}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ message: messageText, history: messages }),
+            });
+            const data = await response.json();
+            setMessages(prev => [...prev, { role: 'assistant', content: data.response }]);
+        } catch (error) {
+            console.warn('[Ragged SDK] Failed to send message:', error);
+            setMessages(prev => [
+                ...prev,
+                { role: 'assistant', content: "Sorry, I'm having trouble connecting right now." },
+            ]);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const toggleOpen = () => setIsOpen(!isOpen);
+
+    return (
+        <View style={styles.container} pointerEvents="box-none">
+            {isOpen && (
+                <View style={styles.chatWindowContainer}>
+                    <ChatWindow
+                        onClose={() => setIsOpen(false)}
+                        config={config}
+                        serverConfig={serverConfig}
+                        messages={messages}
+                        isLoading={isLoading}
+                        onSendMessage={sendMessage}
+                    />
+                </View>
+            )}
+            <View style={styles.bubbleContainer}>
+                <ChatBubble
+                    onPress={toggleOpen}
+                    isOpen={isOpen}
+                    config={config}
+                    serverConfig={serverConfig}
+                />
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 999999,
+        flexDirection: 'column',
+        justifyContent: 'flex-end',
+        alignItems: 'flex-end',
+    },
+    chatWindowContainer: {
+        position: 'absolute',
+        bottom: 96,
+        right: 24,
+        left: Platform.OS === 'web' ? undefined : 24,
+        width: Platform.OS === 'web' ? 380 : 'auto',
+        height: Math.min(SCREEN_HEIGHT - 140, 540),
+        maxWidth: Platform.OS === 'web' ? undefined : 500,
+        backgroundColor: 'transparent',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 20 },
+        shadowOpacity: 0.4,
+        shadowRadius: 25,
+        elevation: 10,
+        borderRadius: 24,
+    },
+    bubbleContainer: {
+        position: 'absolute',
+        bottom: 24,
+        right: 24,
+    },
+});

package/src/index.ts

@@ -0,0 +1,2 @@
+export { RaggedWidget } from './RaggedWidget';
+export type { RaggedConfig, Message, ChatConfigResponse } from './types';

package/src/types.ts

@@ -0,0 +1,24 @@
+export interface RaggedConfig {
+    subdomain: string;
+    apiUrl?: string;
+    widgetShape?: 'circle' | 'rounded-square';
+    widgetSize?: 'small' | 'medium' | 'large';
+    primaryColor?: string;
+}
+
+export interface Message {
+    role: 'user' | 'assistant';
+    content: string;
+}
+
+export interface ChatConfigResponse {
+    name: string;
+    settings: {
+        primaryColor: string;
+        placeholder: string;
+        welcomeMessage: string;
+        widgetShape: 'circle' | 'rounded-square';
+        widgetSize: 'small' | 'medium' | 'large';
+        brandLogo?: string;
+    };
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "target": "esnext",
+        "module": "commonjs",
+        "lib": [
+            "es2017"
+        ],
+        "declaration": true,
+        "outDir": "./dist",
+        "rootDir": "./src",
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react-native"
+    },
+    "include": [
+        "src/**/*"
+    ]
+}