@usechatting/react-native 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/chatting-conversation-screen.js +4 -3
  2. package/dist/chatting-screen-styles.d.ts +23 -16
  3. package/dist/chatting-screen-styles.js +21 -14
  4. package/package.json +1 -1
package/dist/chatting-conversation-screen.js CHANGED
@@ -5,12 +5,13 @@ import { styles } from "./chatting-screen-styles";
5
5
  export function ChattingConversationScreen(input) {
6
6
  const conversation = useChattingConversation(input);
7
7
  const title = conversation.siteConfig?.widgetTitle ?? "Chatting";
8
- const subtitle = conversation.siteConfig?.showOnlineStatus !== false && conversation.siteStatus
8
+ const greeting = conversation.siteConfig?.greetingText?.trim() || "Start a conversation";
9
+ const teamStatus = conversation.siteConfig?.showOnlineStatus !== false && conversation.siteStatus
9
10
  ? conversation.siteStatus.online
10
11
  ? "Team is online"
11
12
  : "Team is away"
12
- : conversation.siteConfig?.greetingText ?? "Start a conversation";
13
- 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" }) })] })] })] }));
13
+ : null;
14
+ 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" }) })] }) })] }));
14
15
  }
15
16
  function Bubble(input) {
16
17
  return (_jsx(View, { style: [
package/dist/chatting-screen-styles.d.ts CHANGED
@@ -4,9 +4,9 @@ export declare const styles: {
4
4
  backgroundColor: string;
5
5
  };
6
6
  header: {
7
- padding: number;
8
- borderBottomWidth: number;
9
- borderBottomColor: string;
7
+ paddingHorizontal: number;
8
+ paddingTop: number;
9
+ paddingBottom: number;
10
10
  backgroundColor: string;
11
11
  };
12
12
  title: {
@@ -25,6 +25,7 @@ export declare const styles: {
25
25
  content: {
26
26
  padding: number;
27
27
  gap: number;
28
+ flexGrow: number;
28
29
  };
29
30
  banner: {
30
31
  padding: number;
@@ -60,8 +61,15 @@ export declare const styles: {
60
61
  };
61
62
  teamBubble: {
62
63
  backgroundColor: string;
63
- borderWidth: number;
64
- borderColor: string;
64
+ borderBottomLeftRadius: number;
65
+ shadowColor: string;
66
+ shadowOpacity: number;
67
+ shadowRadius: number;
68
+ shadowOffset: {
69
+ width: number;
70
+ height: number;
71
+ };
72
+ elevation: number;
65
73
  };
66
74
  typingBubble: {
67
75
  opacity: number;
@@ -100,12 +108,16 @@ export declare const styles: {
100
108
  color: string;
101
109
  };
102
110
  footer: {
103
- gap: number;
104
111
  padding: number;
105
112
  borderTopWidth: number;
106
113
  borderTopColor: string;
107
114
  backgroundColor: string;
108
115
  };
116
+ composerRow: {
117
+ flexDirection: string;
118
+ alignItems: string;
119
+ gap: number;
120
+ };
109
121
  input: {
110
122
  borderWidth: number;
111
123
  borderColor: string;
@@ -116,14 +128,11 @@ export declare const styles: {
116
128
  color: string;
117
129
  };
118
130
  composer: {
131
+ flex: number;
119
132
  minHeight: number;
120
133
  maxHeight: number;
121
134
  textAlignVertical: string;
122
135
  };
123
- actions: {
124
- flexDirection: string;
125
- gap: number;
126
- };
127
136
  button: {
128
137
  flex: number;
129
138
  borderRadius: number;
@@ -132,15 +141,13 @@ export declare const styles: {
132
141
  justifyContent: string;
133
142
  backgroundColor: string;
134
143
  };
135
- secondaryButton: {
136
- backgroundColor: string;
144
+ sendButton: {
145
+ flex: number;
146
+ minHeight: number;
147
+ paddingHorizontal: number;
137
148
  };
138
149
  buttonText: {
139
150
  color: string;
140
151
  fontWeight: string;
141
152
  };
142
- secondaryButtonText: {
143
- color: string;
144
- fontWeight: string;
145
- };
146
153
  };
package/dist/chatting-screen-styles.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { StyleSheet } from "react-native";
2
2
  export const styles = StyleSheet.create({
3
- screen: { flex: 1, backgroundColor: "#F8FAFC" },
4
- header: { padding: 16, borderBottomWidth: 1, borderBottomColor: "#E2E8F0", backgroundColor: "#FFFFFF" },
5
- title: { fontSize: 18, fontWeight: "700", color: "#0F172A" },
6
- subtitle: { marginTop: 4, fontSize: 14, color: "#475569" },
3
+ screen: { flex: 1, backgroundColor: "#F6F8FB" },
4
+ header: { paddingHorizontal: 18, paddingTop: 18, paddingBottom: 16, backgroundColor: "#2563EB" },
5
+ title: { fontSize: 19, fontWeight: "700", color: "#FFFFFF" },
6
+ subtitle: { marginTop: 4, fontSize: 13, color: "#DBEAFE" },
7
7
  scroll: { flex: 1 },
8
- content: { padding: 16, gap: 12 },
8
+ content: { padding: 16, gap: 12, flexGrow: 1 },
9
9
  banner: { padding: 12, borderRadius: 16, backgroundColor: "#FFFFFF", borderWidth: 1, borderColor: "#E2E8F0" },
10
10
  bannerText: { color: "#334155", fontSize: 14, lineHeight: 20 },
11
11
  error: { color: "#B91C1C" },
@@ -13,7 +13,15 @@ export const styles = StyleSheet.create({
13
13
  spacer: { flex: 1, minWidth: 40 },
14
14
  bubble: { maxWidth: "78%", borderRadius: 18, paddingHorizontal: 14, paddingVertical: 10 },
15
15
  userBubble: { backgroundColor: "#2563EB" },
16
- teamBubble: { backgroundColor: "#FFFFFF", borderWidth: 1, borderColor: "#E2E8F0" },
16
+ teamBubble: {
17
+ backgroundColor: "#FFFFFF",
18
+ borderBottomLeftRadius: 6,
19
+ shadowColor: "#0F172A",
20
+ shadowOpacity: 0.08,
21
+ shadowRadius: 10,
22
+ shadowOffset: { width: 0, height: 4 },
23
+ elevation: 2
24
+ },
17
25
  typingBubble: { opacity: 0.8 },
18
26
  userText: { color: "#FFFFFF", fontSize: 15, lineHeight: 22 },
19
27
  teamText: { color: "#0F172A", fontSize: 15, lineHeight: 22 },
@@ -21,12 +29,11 @@ export const styles = StyleSheet.create({
21
29
  faqCard: { padding: 12, borderRadius: 14, backgroundColor: "#FFFFFF", borderWidth: 1, borderColor: "#E2E8F0", gap: 4 },
22
30
  faqTitle: { fontSize: 14, fontWeight: "700", color: "#0F172A" },
23
31
  faqText: { fontSize: 13, lineHeight: 19, color: "#475569" },
24
- footer: { gap: 12, padding: 16, borderTopWidth: 1, borderTopColor: "#E2E8F0", backgroundColor: "#FFFFFF" },
25
- input: { borderWidth: 1, borderColor: "#CBD5E1", borderRadius: 14, paddingHorizontal: 12, paddingVertical: 10, backgroundColor: "#FFFFFF", color: "#0F172A" },
26
- composer: { minHeight: 44, maxHeight: 120, textAlignVertical: "top" },
27
- actions: { flexDirection: "row", gap: 12 },
28
- button: { flex: 1, borderRadius: 14, paddingVertical: 12, alignItems: "center", justifyContent: "center", backgroundColor: "#2563EB" },
29
- secondaryButton: { backgroundColor: "#EFF6FF" },
30
- buttonText: { color: "#FFFFFF", fontWeight: "700" },
31
- secondaryButtonText: { color: "#2563EB", fontWeight: "700" }
32
+ footer: { padding: 14, borderTopWidth: 1, borderTopColor: "#E2E8F0", backgroundColor: "#FFFFFF" },
33
+ composerRow: { flexDirection: "row", alignItems: "flex-end", gap: 8 },
34
+ input: { borderWidth: 1, borderColor: "#CBD5E1", borderRadius: 20, paddingHorizontal: 14, paddingVertical: 10, backgroundColor: "#F8FAFC", color: "#0F172A" },
35
+ composer: { flex: 1, minHeight: 44, maxHeight: 120, textAlignVertical: "top" },
36
+ button: { flex: 1, borderRadius: 20, paddingVertical: 12, alignItems: "center", justifyContent: "center", backgroundColor: "#2563EB" },
37
+ sendButton: { flex: 0, minHeight: 44, paddingHorizontal: 18 },
38
+ buttonText: { color: "#FFFFFF", fontWeight: "700" }
32
39
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@usechatting/react-native",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "React Native and Expo visitor chat SDK for Chatting.",
5
5
  "license": "Proprietary",
6
6
  "main": "dist/index.js",