@usechatting/react-native 0.1.3 → 0.1.4

package/dist/chatting-conversation-screen.js

@@ -12,7 +12,7 @@ export function ChattingConversationScreen(input) {
             ? "Team is online"
             : "Team is away"
         : 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" }) })] }) })] }));
+    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: [

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-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);
@@ -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.3",
+  "version": "0.1.4",
   "description": "React Native and Expo visitor chat SDK for Chatting.",
   "license": "Proprietary",
   "main": "dist/index.js",