@usechatting/react-native 0.1.1 → 0.1.3

package/dist/chatting-conversation-screen.js

@@ -4,18 +4,20 @@ import { useChattingConversation } from "./use-chatting-conversation";
 import { styles } from "./chatting-screen-styles";
 export function ChattingConversationScreen(input) {
     const conversation = useChattingConversation(input);
-    const title = conversation.siteConfig?.widgetTitle ?? "Chatting";
-    const subtitle = conversation.siteConfig?.showOnlineStatus !== false && conversation.siteStatus
+    const title = conversation.siteConfig?.widgetTitle ?? "";
+    const greeting = conversation.siteConfig?.greetingText?.trim() || "Start a conversation";
+    const brandColor = conversation.siteConfig?.brandColor?.trim() || "#2563EB";
+    const teamStatus = conversation.siteConfig?.showOnlineStatus !== false && conversation.siteStatus
         ? conversation.siteStatus.online
             ? "Team is online"
             : "Team is away"
-        : conversation.siteConfig?.greetingText ?? "Start a conversation";
-    return (_jsxs(View, { style: styles.screen, children: [_jsxs(View, { style: styles.header, children: [_jsx(Text, { style: styles.title, children: title }), _jsx(Text, { style: styles.subtitle, children: subtitle })] }), _jsxs(ScrollView, { style: styles.scroll, contentContainerStyle: styles.content, children: [conversation.errorMessage ? (_jsx(View, { style: styles.banner, children: _jsx(Text, { style: [styles.bannerText, styles.error], children: conversation.errorMessage }) })) : null, conversation.isLoading ? _jsx(ActivityIndicator, { color: "#2563EB" }) : null, !conversation.isLoading && conversation.messages.length === 0 ? (_jsx(View, { style: styles.banner, children: _jsx(Text, { style: styles.bannerText, children: "Open support inside your app without rebuilding visitor chat from scratch." }) })) : null, conversation.messages.map((message) => (_jsx(View, { style: styles.row, children: message.sender === "team" ? (_jsxs(_Fragment, { children: [_jsx(Bubble, { message: message.content || "(attachment placeholder)", isUser: false }), _jsx(View, { style: styles.spacer })] })) : (_jsxs(_Fragment, { children: [_jsx(View, { style: styles.spacer }), _jsx(Bubble, { message: message.content || "(attachment placeholder)", isUser: true })] })) }, message.id))), conversation.teamTyping ? (_jsxs(View, { style: styles.row, children: [_jsx(Bubble, { message: "Team is typing...", isUser: false, subtle: true }), _jsx(View, { style: styles.spacer })] })) : null, conversation.faqSuggestions?.items.map((item) => (_jsxs(View, { style: styles.faqCard, children: [_jsx(Text, { style: styles.faqTitle, children: item.question }), _jsx(Text, { style: styles.faqText, children: item.answer })] }, item.id))), conversation.faqSuggestions?.fallbackMessage ? (_jsx(Text, { style: styles.meta, children: conversation.faqSuggestions.fallbackMessage })) : null] }), _jsxs(View, { style: styles.footer, children: [_jsx(TextInput, { value: conversation.emailAddress, onChangeText: conversation.setEmailAddress, placeholder: "Email for follow-up", autoCapitalize: "none", autoCorrect: false, style: styles.input }), _jsx(TextInput, { value: conversation.draftMessage, onChangeText: conversation.setDraftMessage, placeholder: "Type a message", multiline: true, style: [styles.input, styles.composer] }), _jsxs(View, { style: styles.actions, children: [_jsx(TouchableOpacity, { style: [styles.button, styles.secondaryButton], onPress: () => void conversation.saveEmail(), children: _jsx(Text, { style: styles.secondaryButtonText, children: conversation.isSavingEmail ? "Saving..." : "Save email" }) }), _jsx(TouchableOpacity, { style: styles.button, onPress: () => void conversation.sendMessage(), children: _jsx(Text, { style: styles.buttonText, children: conversation.isSending ? "Sending..." : "Send" }) })] })] })] }));
+        : null;
+    return (_jsxs(View, { style: styles.screen, children: [_jsxs(View, { style: [styles.header, { backgroundColor: brandColor }], children: [title ? _jsx(Text, { style: styles.title, children: title }) : null, teamStatus ? _jsx(Text, { style: styles.subtitle, children: teamStatus }) : null] }), _jsxs(ScrollView, { style: styles.scroll, contentContainerStyle: styles.content, children: [conversation.errorMessage ? (_jsx(View, { style: styles.banner, children: _jsx(Text, { style: [styles.bannerText, styles.error], children: conversation.errorMessage }) })) : null, conversation.isLoading ? _jsx(ActivityIndicator, { color: brandColor }) : null, !conversation.isLoading && conversation.messages.length === 0 ? (_jsxs(View, { style: styles.row, children: [_jsx(Bubble, { message: greeting, isUser: false, brandColor: brandColor }), _jsx(View, { style: styles.spacer })] })) : null, conversation.messages.map((message) => (_jsx(View, { style: styles.row, children: message.sender === "team" ? (_jsxs(_Fragment, { children: [_jsx(Bubble, { message: message.content || "(attachment placeholder)", isUser: false, brandColor: brandColor }), _jsx(View, { style: styles.spacer })] })) : (_jsxs(_Fragment, { children: [_jsx(View, { style: styles.spacer }), _jsx(Bubble, { message: message.content || "(attachment placeholder)", isUser: true, brandColor: brandColor })] })) }, message.id))), conversation.teamTyping ? (_jsxs(View, { style: styles.row, children: [_jsx(Bubble, { message: "Team is typing...", isUser: false, subtle: true, brandColor: brandColor }), _jsx(View, { style: styles.spacer })] })) : null, conversation.faqSuggestions?.items.map((item) => (_jsxs(View, { style: styles.faqCard, children: [_jsx(Text, { style: styles.faqTitle, children: item.question }), _jsx(Text, { style: styles.faqText, children: item.answer })] }, item.id))), conversation.faqSuggestions?.fallbackMessage ? (_jsx(Text, { style: styles.meta, children: conversation.faqSuggestions.fallbackMessage })) : null] }), _jsx(View, { style: styles.footer, children: _jsxs(View, { style: styles.composerRow, children: [_jsx(TextInput, { value: conversation.draftMessage, onChangeText: conversation.setDraftMessage, placeholder: "Type a message", multiline: true, style: [styles.input, styles.composer] }), _jsx(TouchableOpacity, { style: [styles.button, styles.sendButton, { backgroundColor: brandColor }], onPress: () => void conversation.sendMessage(), children: _jsx(Text, { style: styles.buttonText, children: conversation.isSending ? "Sending..." : "Send" }) })] }) })] }));
 }
 function Bubble(input) {
     return (_jsx(View, { style: [
             styles.bubble,
-            input.isUser ? styles.userBubble : styles.teamBubble,
+            input.isUser ? { backgroundColor: input.brandColor } : styles.teamBubble,
             input.subtle ? styles.typingBubble : null
         ], children: _jsx(Text, { style: input.isUser ? styles.userText : styles.teamText, children: input.message }) }));
 }

package/dist/chatting-screen-styles.d.ts

@@ -4,10 +4,9 @@ export declare const styles: {
         backgroundColor: string;
     };
     header: {
-        padding: number;
-        borderBottomWidth: number;
-        borderBottomColor: string;
-        backgroundColor: string;
+        paddingHorizontal: number;
+        paddingTop: number;
+        paddingBottom: number;
     };
     title: {
         fontSize: number;
@@ -25,6 +24,7 @@ export declare const styles: {
     content: {
         padding: number;
         gap: number;
+        flexGrow: number;
     };
     banner: {
         padding: number;
@@ -55,13 +55,17 @@ export declare const styles: {
         paddingHorizontal: number;
         paddingVertical: number;
     };
-    userBubble: {
-        backgroundColor: string;
-    };
     teamBubble: {
         backgroundColor: string;
-        borderWidth: number;
-        borderColor: string;
+        borderBottomLeftRadius: number;
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowRadius: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        elevation: number;
     };
     typingBubble: {
         opacity: number;
@@ -100,12 +104,16 @@ export declare const styles: {
         color: string;
     };
     footer: {
-        gap: number;
         padding: number;
         borderTopWidth: number;
         borderTopColor: string;
         backgroundColor: string;
     };
+    composerRow: {
+        flexDirection: string;
+        alignItems: string;
+        gap: number;
+    };
     input: {
         borderWidth: number;
         borderColor: string;
@@ -116,31 +124,25 @@ export declare const styles: {
         color: string;
     };
     composer: {
+        flex: number;
         minHeight: number;
         maxHeight: number;
         textAlignVertical: string;
     };
-    actions: {
-        flexDirection: string;
-        gap: number;
-    };
     button: {
         flex: number;
         borderRadius: number;
         paddingVertical: number;
         alignItems: string;
         justifyContent: string;
-        backgroundColor: string;
     };
-    secondaryButton: {
-        backgroundColor: string;
+    sendButton: {
+        flex: number;
+        minHeight: number;
+        paddingHorizontal: number;
     };
     buttonText: {
         color: string;
         fontWeight: string;
     };
-    secondaryButtonText: {
-        color: string;
-        fontWeight: string;
-    };
 };

package/dist/chatting-screen-styles.js

@@ -1,19 +1,26 @@
 import { StyleSheet } from "react-native";
 export const styles = StyleSheet.create({
-    screen: { flex: 1, backgroundColor: "#F8FAFC" },
-    header: { padding: 16, borderBottomWidth: 1, borderBottomColor: "#E2E8F0", backgroundColor: "#FFFFFF" },
-    title: { fontSize: 18, fontWeight: "700", color: "#0F172A" },
-    subtitle: { marginTop: 4, fontSize: 14, color: "#475569" },
+    screen: { flex: 1, backgroundColor: "#F6F8FB" },
+    header: { paddingHorizontal: 18, paddingTop: 18, paddingBottom: 16 },
+    title: { fontSize: 19, fontWeight: "700", color: "#FFFFFF" },
+    subtitle: { marginTop: 4, fontSize: 13, color: "#DBEAFE" },
     scroll: { flex: 1 },
-    content: { padding: 16, gap: 12 },
+    content: { padding: 16, gap: 12, flexGrow: 1 },
     banner: { padding: 12, borderRadius: 16, backgroundColor: "#FFFFFF", borderWidth: 1, borderColor: "#E2E8F0" },
     bannerText: { color: "#334155", fontSize: 14, lineHeight: 20 },
     error: { color: "#B91C1C" },
     row: { flexDirection: "row", alignItems: "flex-end" },
     spacer: { flex: 1, minWidth: 40 },
     bubble: { maxWidth: "78%", borderRadius: 18, paddingHorizontal: 14, paddingVertical: 10 },
-    userBubble: { backgroundColor: "#2563EB" },
-    teamBubble: { backgroundColor: "#FFFFFF", borderWidth: 1, borderColor: "#E2E8F0" },
+    teamBubble: {
+        backgroundColor: "#FFFFFF",
+        borderBottomLeftRadius: 6,
+        shadowColor: "#0F172A",
+        shadowOpacity: 0.08,
+        shadowRadius: 10,
+        shadowOffset: { width: 0, height: 4 },
+        elevation: 2
+    },
     typingBubble: { opacity: 0.8 },
     userText: { color: "#FFFFFF", fontSize: 15, lineHeight: 22 },
     teamText: { color: "#0F172A", fontSize: 15, lineHeight: 22 },
@@ -21,12 +28,11 @@ export const styles = StyleSheet.create({
     faqCard: { padding: 12, borderRadius: 14, backgroundColor: "#FFFFFF", borderWidth: 1, borderColor: "#E2E8F0", gap: 4 },
     faqTitle: { fontSize: 14, fontWeight: "700", color: "#0F172A" },
     faqText: { fontSize: 13, lineHeight: 19, color: "#475569" },
-    footer: { gap: 12, padding: 16, borderTopWidth: 1, borderTopColor: "#E2E8F0", backgroundColor: "#FFFFFF" },
-    input: { borderWidth: 1, borderColor: "#CBD5E1", borderRadius: 14, paddingHorizontal: 12, paddingVertical: 10, backgroundColor: "#FFFFFF", color: "#0F172A" },
-    composer: { minHeight: 44, maxHeight: 120, textAlignVertical: "top" },
-    actions: { flexDirection: "row", gap: 12 },
-    button: { flex: 1, borderRadius: 14, paddingVertical: 12, alignItems: "center", justifyContent: "center", backgroundColor: "#2563EB" },
-    secondaryButton: { backgroundColor: "#EFF6FF" },
-    buttonText: { color: "#FFFFFF", fontWeight: "700" },
-    secondaryButtonText: { color: "#2563EB", fontWeight: "700" }
+    footer: { padding: 14, borderTopWidth: 1, borderTopColor: "#E2E8F0", backgroundColor: "#FFFFFF" },
+    composerRow: { flexDirection: "row", alignItems: "flex-end", gap: 8 },
+    input: { borderWidth: 1, borderColor: "#CBD5E1", borderRadius: 20, paddingHorizontal: 14, paddingVertical: 10, backgroundColor: "#F8FAFC", color: "#0F172A" },
+    composer: { flex: 1, minHeight: 44, maxHeight: 120, textAlignVertical: "top" },
+    button: { flex: 1, borderRadius: 20, paddingVertical: 12, alignItems: "center", justifyContent: "center" },
+    sendButton: { flex: 0, minHeight: 44, paddingHorizontal: 18 },
+    buttonText: { color: "#FFFFFF", fontWeight: "700" }
 });

package/dist/use-chatting-conversation.js

@@ -10,7 +10,7 @@ export function useChattingConversation(input) {
     const [emailAddress, setEmailAddress] = useState(input.draftVisitorEmail ?? "");
     const [teamTyping, setTeamTyping] = useState(false);
     const [errorMessage, setErrorMessage] = useState(null);
-    const [isLoading, setIsLoading] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
     const [isSending, setIsSending] = useState(false);
     const [isSavingEmail, setIsSavingEmail] = useState(false);
     const stopSyncRef = useRef(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usechatting/react-native",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "React Native and Expo visitor chat SDK for Chatting.",
   "license": "Proprietary",
   "main": "dist/index.js",