@usechatting/react-native 0.1.2 → 0.1.3

package/dist/chatting-conversation-screen.js

@@ -4,19 +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 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"
         : null;
-    return (_jsxs(View, { style: styles.screen, children: [_jsxs(View, { style: styles.header, children: [_jsx(Text, { style: styles.title, children: title }), 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: "#2563EB" }) : null, !conversation.isLoading && conversation.messages.length === 0 ? (_jsxs(View, { style: styles.row, children: [_jsx(Bubble, { message: greeting, isUser: false }), _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 }), _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] }), _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], onPress: () => void conversation.sendMessage(), children: _jsx(Text, { style: styles.buttonText, children: conversation.isSending ? "Sending..." : "Send" }) })] }) })] }));
+    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

@@ -7,7 +7,6 @@ export declare const styles: {
         paddingHorizontal: number;
         paddingTop: number;
         paddingBottom: number;
-        backgroundColor: string;
     };
     title: {
         fontSize: number;
@@ -56,9 +55,6 @@ export declare const styles: {
         paddingHorizontal: number;
         paddingVertical: number;
     };
-    userBubble: {
-        backgroundColor: string;
-    };
     teamBubble: {
         backgroundColor: string;
         borderBottomLeftRadius: number;
@@ -139,7 +135,6 @@ export declare const styles: {
         paddingVertical: number;
         alignItems: string;
         justifyContent: string;
-        backgroundColor: string;
     };
     sendButton: {
         flex: number;

package/dist/chatting-screen-styles.js

@@ -1,7 +1,7 @@
 import { StyleSheet } from "react-native";
 export const styles = StyleSheet.create({
     screen: { flex: 1, backgroundColor: "#F6F8FB" },
-    header: { paddingHorizontal: 18, paddingTop: 18, paddingBottom: 16, backgroundColor: "#2563EB" },
+    header: { paddingHorizontal: 18, paddingTop: 18, paddingBottom: 16 },
     title: { fontSize: 19, fontWeight: "700", color: "#FFFFFF" },
     subtitle: { marginTop: 4, fontSize: 13, color: "#DBEAFE" },
     scroll: { flex: 1 },
@@ -12,7 +12,6 @@ export const styles = StyleSheet.create({
     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",
         borderBottomLeftRadius: 6,
@@ -33,7 +32,7 @@ export const styles = StyleSheet.create({
     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", backgroundColor: "#2563EB" },
+    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.2",
+  "version": "0.1.3",
   "description": "React Native and Expo visitor chat SDK for Chatting.",
   "license": "Proprietary",
   "main": "dist/index.js",