@usechatting/react-native 0.1.2 → 0.1.4

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: "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-optimistic-message.d.ts

@@ -0,0 +1,4 @@
+import type { ChattingMessage } from "./chatting-types";
+export declare function createOptimisticMessage(content: string): ChattingMessage;
+export declare function settleOptimisticMessage(messages: ChattingMessage[], optimisticId: string, savedMessage: ChattingMessage): ChattingMessage[];
+export declare function removeOptimisticMessage(messages: ChattingMessage[], optimisticId: string): ChattingMessage[];

package/dist/chatting-optimistic-message.js

@@ -0,0 +1,19 @@
+export function createOptimisticMessage(content) {
+    return {
+        id: `pending-${Date.now()}-${Math.random().toString(16).slice(2)}`,
+        content,
+        createdAt: new Date().toISOString(),
+        sender: "user",
+        attachments: [],
+        pending: true
+    };
+}
+export function settleOptimisticMessage(messages, optimisticId, savedMessage) {
+    const remaining = messages.filter((message) => message.id !== optimisticId);
+    return remaining.some((message) => message.id === savedMessage.id)
+        ? remaining
+        : [...remaining, savedMessage];
+}
+export function removeOptimisticMessage(messages, optimisticId) {
+    return messages.filter((message) => message.id !== optimisticId);
+}

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/chatting-types.d.ts

@@ -51,6 +51,7 @@ export interface ChattingMessage {
     createdAt: string;
     sender: ChattingSender;
     attachments: ChattingMessageAttachment[];
+    pending?: boolean;
 }
 export interface ChattingFAQItem {
     id: string;

package/dist/use-chatting-conversation.js

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { applyConversation, startConversationSync, syncTyping } from "./chatting-hook-helpers";
+import { createOptimisticMessage, removeOptimisticMessage, settleOptimisticMessage } from "./chatting-optimistic-message";
 import { normalizeText, toErrorMessage } from "./chatting-utils";
 export function useChattingConversation(input) {
     const [siteConfig, setSiteConfig] = useState(null);
@@ -10,7 +11,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);
@@ -112,15 +113,21 @@ export function useChattingConversation(input) {
         if (!nextMessage) {
             return;
         }
+        const optimisticMessage = createOptimisticMessage(nextMessage);
         setIsSending(true);
         setErrorMessage(null);
+        setDraftMessageState("");
+        setMessages((current) => [...current, optimisticMessage]);
         try {
-            await input.client.sendMessage(nextMessage, { context: input.context, email: emailAddress });
-            setDraftMessageState("");
+            const result = await input.client.sendMessage(nextMessage, { context: input.context, email: emailAddress });
+            setMessages((current) => settleOptimisticMessage(current, optimisticMessage.id, result.message));
+            setFaqSuggestions(result.faqSuggestions);
             setTeamTyping(false);
             await refreshConversationState();
         }
         catch (error) {
+            setMessages((current) => removeOptimisticMessage(current, optimisticMessage.id));
+            setDraftMessageState((current) => current || nextMessage);
             setErrorMessage(toErrorMessage(error));
         }
         finally {

package/package.json

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