react-native-srschat 0.1.5 → 0.1.7
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.
- package/lib/commonjs/index.js +183 -74
- package/lib/commonjs/index.js.map +1 -1
- package/lib/module/index.js +184 -75
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/index.d.ts +2 -1
- package/lib/typescript/index.d.ts.map +1 -1
- package/package.json +5 -3
- package/src/index.tsx +210 -81
package/lib/commonjs/index.js
CHANGED
|
@@ -6,39 +6,87 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.Chat = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
|
+
var _vectorIcons = require("@expo/vector-icons");
|
|
9
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
11
|
const defaultTheme = {
|
|
11
12
|
primaryColor: '#007AFF',
|
|
12
13
|
backgroundColor: '#FFFFFF',
|
|
13
|
-
textColor: '#000000'
|
|
14
|
+
textColor: '#000000',
|
|
15
|
+
inputBackgroundColor: '#FFFFFF'
|
|
14
16
|
};
|
|
15
17
|
const Chat = ({
|
|
16
18
|
onSendMessage,
|
|
19
|
+
placeholder = 'Type your message here...',
|
|
17
20
|
theme = defaultTheme
|
|
18
21
|
}) => {
|
|
19
22
|
const [message, setMessage] = _react.default.useState('');
|
|
20
23
|
const [messages, setMessages] = _react.default.useState([]);
|
|
24
|
+
const [refreshing, setRefreshing] = _react.default.useState(false);
|
|
25
|
+
const onRefresh = _react.default.useCallback(async () => {
|
|
26
|
+
setRefreshing(true);
|
|
27
|
+
try {
|
|
28
|
+
const response = await onSendMessage("Hi, I'm refreshing the chat!");
|
|
29
|
+
const currentTime = new Date().toLocaleTimeString([], {
|
|
30
|
+
hour: 'numeric',
|
|
31
|
+
minute: '2-digit',
|
|
32
|
+
hour12: true
|
|
33
|
+
});
|
|
34
|
+
setMessages(prev => [...prev, {
|
|
35
|
+
text: response,
|
|
36
|
+
isUser: false,
|
|
37
|
+
timestamp: currentTime
|
|
38
|
+
}]);
|
|
39
|
+
} catch (error) {
|
|
40
|
+
console.error('Error refreshing chat:', error);
|
|
41
|
+
} finally {
|
|
42
|
+
setRefreshing(false);
|
|
43
|
+
}
|
|
44
|
+
}, [onSendMessage]);
|
|
21
45
|
const handleSend = async () => {
|
|
22
46
|
if (!message.trim()) return;
|
|
23
47
|
const userMessage = message;
|
|
24
48
|
setMessage('');
|
|
49
|
+
const currentTime = new Date().toLocaleTimeString([], {
|
|
50
|
+
hour: 'numeric',
|
|
51
|
+
minute: '2-digit',
|
|
52
|
+
hour12: true
|
|
53
|
+
});
|
|
25
54
|
setMessages(prev => [...prev, {
|
|
26
55
|
text: userMessage,
|
|
27
|
-
isUser: true
|
|
56
|
+
isUser: true,
|
|
57
|
+
timestamp: currentTime
|
|
28
58
|
}]);
|
|
29
59
|
try {
|
|
30
|
-
|
|
60
|
+
// Create bot message placeholder before streaming
|
|
31
61
|
setMessages(prev => [...prev, {
|
|
32
|
-
text:
|
|
33
|
-
isUser: false
|
|
62
|
+
text: '',
|
|
63
|
+
isUser: false,
|
|
64
|
+
timestamp: currentTime
|
|
34
65
|
}]);
|
|
66
|
+
const response = await onSendMessage(userMessage, chunk => {
|
|
67
|
+
setMessages(prev => {
|
|
68
|
+
const newMessages = [...prev];
|
|
69
|
+
const lastMessage = newMessages[newMessages.length - 1];
|
|
70
|
+
if (lastMessage && !lastMessage.isUser) {
|
|
71
|
+
lastMessage.text += chunk;
|
|
72
|
+
}
|
|
73
|
+
return newMessages;
|
|
74
|
+
});
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
// Only update if final response is different from streamed content
|
|
78
|
+
setMessages(prev => {
|
|
79
|
+
const newMessages = [...prev];
|
|
80
|
+
const lastMessage = newMessages[newMessages.length - 1];
|
|
81
|
+
if (lastMessage && !lastMessage.isUser && lastMessage.text !== response) {
|
|
82
|
+
lastMessage.text = response;
|
|
83
|
+
}
|
|
84
|
+
return newMessages;
|
|
85
|
+
});
|
|
35
86
|
} catch (error) {
|
|
36
87
|
console.error('Error sending message:', error);
|
|
37
88
|
}
|
|
38
89
|
};
|
|
39
|
-
const containerStyle = [styles.container, {
|
|
40
|
-
backgroundColor: theme.backgroundColor
|
|
41
|
-
}];
|
|
42
90
|
const getMessageStyle = fromUser => [styles.messageBubble, fromUser ? styles.userMessage : styles.botMessage, {
|
|
43
91
|
backgroundColor: fromUser ? theme.primaryColor : '#E8E8E8'
|
|
44
92
|
}];
|
|
@@ -46,33 +94,72 @@ const Chat = ({
|
|
|
46
94
|
color: fromUser ? '#fff' : theme.textColor
|
|
47
95
|
}];
|
|
48
96
|
return /*#__PURE__*/_react.default.createElement(_reactNative.SafeAreaView, {
|
|
49
|
-
style:
|
|
50
|
-
|
|
97
|
+
style: [styles.container, {
|
|
98
|
+
backgroundColor: theme.backgroundColor
|
|
99
|
+
}]
|
|
51
100
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.KeyboardAvoidingView, {
|
|
52
101
|
behavior: _reactNative.Platform.OS === 'ios' ? 'padding' : 'height',
|
|
53
|
-
style: styles.content
|
|
102
|
+
style: styles.content,
|
|
103
|
+
keyboardVerticalOffset: _reactNative.Platform.OS === 'ios' ? 60 : 0
|
|
54
104
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
|
|
55
|
-
style: styles.messagesContainer
|
|
105
|
+
style: styles.messagesContainer,
|
|
106
|
+
contentContainerStyle: styles.messagesContent,
|
|
107
|
+
refreshControl: /*#__PURE__*/_react.default.createElement(_reactNative.RefreshControl, {
|
|
108
|
+
refreshing: refreshing,
|
|
109
|
+
onRefresh: onRefresh,
|
|
110
|
+
tintColor: theme.primaryColor || defaultTheme.primaryColor,
|
|
111
|
+
colors: [theme.primaryColor || defaultTheme.primaryColor],
|
|
112
|
+
progressBackgroundColor: "#ffffff"
|
|
113
|
+
})
|
|
56
114
|
}, messages.map((msg, i) => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
57
115
|
key: i,
|
|
58
|
-
style:
|
|
116
|
+
style: styles.messageWrapper
|
|
117
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
118
|
+
style: [getMessageStyle(msg.isUser), styles.messageShadow]
|
|
59
119
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
60
120
|
style: getTextStyle(msg.isUser)
|
|
61
|
-
}, msg.text))
|
|
121
|
+
}, msg.text)), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
122
|
+
style: [styles.timestamp, msg.isUser ? styles.timestampRight : styles.timestampLeft]
|
|
123
|
+
}, msg.timestamp)))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
124
|
+
style: styles.inputWrapper
|
|
125
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
62
126
|
style: styles.inputContainer
|
|
63
127
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, {
|
|
64
|
-
style:
|
|
65
|
-
color: theme.textColor
|
|
66
|
-
}],
|
|
128
|
+
style: styles.input,
|
|
67
129
|
value: message,
|
|
68
130
|
onChangeText: setMessage,
|
|
69
|
-
placeholder:
|
|
70
|
-
placeholderTextColor: "#999"
|
|
71
|
-
|
|
72
|
-
|
|
131
|
+
placeholder: placeholder,
|
|
132
|
+
placeholderTextColor: "#999",
|
|
133
|
+
multiline: true
|
|
134
|
+
})), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
135
|
+
style: styles.inputButtonsContainer
|
|
136
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
|
|
137
|
+
style: styles.inputButton
|
|
138
|
+
}, /*#__PURE__*/_react.default.createElement(_vectorIcons.Ionicons, {
|
|
139
|
+
name: "add",
|
|
140
|
+
size: 28,
|
|
141
|
+
color: "#8E8E93"
|
|
142
|
+
})), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
|
|
143
|
+
style: styles.inputButton
|
|
144
|
+
}, /*#__PURE__*/_react.default.createElement(_vectorIcons.Ionicons, {
|
|
145
|
+
name: "refresh-outline",
|
|
146
|
+
size: 28,
|
|
147
|
+
color: "#8E8E93"
|
|
148
|
+
})), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
|
|
149
|
+
style: styles.inputButton
|
|
150
|
+
}, /*#__PURE__*/_react.default.createElement(_vectorIcons.Ionicons, {
|
|
151
|
+
name: "mic-outline",
|
|
152
|
+
size: 28,
|
|
153
|
+
color: "#8E8E93"
|
|
154
|
+
})), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
|
|
155
|
+
style: [styles.sendButton, !message.trim() && styles.disabledButton],
|
|
73
156
|
onPress: handleSend,
|
|
74
|
-
|
|
75
|
-
}
|
|
157
|
+
disabled: !message.trim()
|
|
158
|
+
}, /*#__PURE__*/_react.default.createElement(_vectorIcons.Ionicons, {
|
|
159
|
+
name: "paper-plane-outline",
|
|
160
|
+
size: 28,
|
|
161
|
+
color: message.trim() ? theme.primaryColor : '#8E8E93'
|
|
162
|
+
}))))));
|
|
76
163
|
};
|
|
77
164
|
exports.Chat = Chat;
|
|
78
165
|
const styles = _reactNative.StyleSheet.create({
|
|
@@ -81,86 +168,108 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
81
168
|
backgroundColor: '#FFFFFF'
|
|
82
169
|
},
|
|
83
170
|
content: {
|
|
84
|
-
flex: 1
|
|
85
|
-
backgroundColor: '#F8F9FA'
|
|
171
|
+
flex: 1
|
|
86
172
|
},
|
|
87
173
|
messagesContainer: {
|
|
88
|
-
flex: 1
|
|
89
|
-
padding: 20,
|
|
90
|
-
paddingTop: 30
|
|
174
|
+
flex: 1
|
|
91
175
|
},
|
|
92
|
-
|
|
93
|
-
maxWidth: '85%',
|
|
176
|
+
messagesContent: {
|
|
94
177
|
padding: 16,
|
|
178
|
+
paddingBottom: 32
|
|
179
|
+
},
|
|
180
|
+
messageWrapper: {
|
|
181
|
+
marginBottom: 16
|
|
182
|
+
},
|
|
183
|
+
timestamp: {
|
|
184
|
+
fontSize: 12,
|
|
185
|
+
color: '#8E8E93',
|
|
186
|
+
marginTop: 4,
|
|
187
|
+
paddingHorizontal: 4
|
|
188
|
+
},
|
|
189
|
+
timestampRight: {
|
|
190
|
+
textAlign: 'right'
|
|
191
|
+
},
|
|
192
|
+
timestampLeft: {
|
|
193
|
+
textAlign: 'left'
|
|
194
|
+
},
|
|
195
|
+
messageBubble: {
|
|
196
|
+
maxWidth: '70%',
|
|
197
|
+
padding: 12,
|
|
198
|
+
paddingHorizontal: 16,
|
|
95
199
|
borderRadius: 20,
|
|
96
|
-
|
|
97
|
-
|
|
200
|
+
backgroundColor: '#FFFFFF'
|
|
201
|
+
},
|
|
202
|
+
messageShadow: {
|
|
98
203
|
shadowColor: '#000',
|
|
99
204
|
shadowOffset: {
|
|
100
205
|
width: 0,
|
|
101
|
-
height:
|
|
206
|
+
height: 1
|
|
102
207
|
},
|
|
103
|
-
shadowOpacity: 0.
|
|
104
|
-
shadowRadius:
|
|
105
|
-
elevation:
|
|
208
|
+
shadowOpacity: 0.08,
|
|
209
|
+
shadowRadius: 2,
|
|
210
|
+
elevation: 2
|
|
106
211
|
},
|
|
107
212
|
userMessage: {
|
|
108
213
|
alignSelf: 'flex-end',
|
|
109
|
-
backgroundColor: '#
|
|
110
|
-
borderWidth: 1,
|
|
111
|
-
borderColor: 'rgba(0, 0, 0, 0.04)'
|
|
214
|
+
backgroundColor: '#007AFF'
|
|
112
215
|
},
|
|
113
216
|
botMessage: {
|
|
114
217
|
alignSelf: 'flex-start',
|
|
115
|
-
backgroundColor: '#
|
|
116
|
-
borderWidth: 1,
|
|
117
|
-
borderColor: 'rgba(0, 0, 0, 0.04)'
|
|
218
|
+
backgroundColor: '#F2F2F7'
|
|
118
219
|
},
|
|
119
220
|
messageText: {
|
|
120
|
-
fontSize:
|
|
121
|
-
lineHeight: 22
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
221
|
+
fontSize: 16,
|
|
222
|
+
lineHeight: 22
|
|
223
|
+
},
|
|
224
|
+
inputWrapper: {
|
|
225
|
+
backgroundColor: '#FFFFFF',
|
|
226
|
+
paddingHorizontal: 8,
|
|
227
|
+
paddingVertical: 8,
|
|
228
|
+
borderTopWidth: 1,
|
|
229
|
+
borderTopColor: 'rgba(0, 0, 0, 0.1)'
|
|
125
230
|
},
|
|
126
231
|
inputContainer: {
|
|
127
232
|
flexDirection: 'row',
|
|
128
233
|
alignItems: 'center',
|
|
129
|
-
paddingHorizontal:
|
|
130
|
-
paddingVertical:
|
|
234
|
+
paddingHorizontal: 8,
|
|
235
|
+
paddingVertical: 8,
|
|
131
236
|
backgroundColor: '#FFFFFF',
|
|
132
|
-
|
|
133
|
-
|
|
237
|
+
borderRadius: 16,
|
|
238
|
+
margin: 8,
|
|
134
239
|
shadowColor: '#000',
|
|
135
240
|
shadowOffset: {
|
|
136
241
|
width: 0,
|
|
137
|
-
height:
|
|
242
|
+
height: 2
|
|
138
243
|
},
|
|
139
|
-
shadowOpacity: 0.
|
|
140
|
-
shadowRadius:
|
|
141
|
-
elevation:
|
|
142
|
-
marginTop: 'auto'
|
|
244
|
+
shadowOpacity: 0.1,
|
|
245
|
+
shadowRadius: 4,
|
|
246
|
+
elevation: 3
|
|
143
247
|
},
|
|
144
248
|
input: {
|
|
145
249
|
flex: 1,
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
250
|
+
fontSize: 16,
|
|
251
|
+
paddingVertical: 8,
|
|
252
|
+
paddingHorizontal: 12,
|
|
253
|
+
maxHeight: 100,
|
|
254
|
+
color: '#000000'
|
|
255
|
+
},
|
|
256
|
+
inputButtonsContainer: {
|
|
257
|
+
flexDirection: 'row',
|
|
258
|
+
alignItems: 'center',
|
|
259
|
+
justifyContent: 'space-between',
|
|
260
|
+
paddingHorizontal: 8,
|
|
261
|
+
marginTop: 4
|
|
262
|
+
},
|
|
263
|
+
inputButton: {
|
|
264
|
+
padding: 6,
|
|
265
|
+
marginHorizontal: 4
|
|
266
|
+
},
|
|
267
|
+
sendButton: {
|
|
268
|
+
padding: 6,
|
|
269
|
+
marginLeft: 'auto'
|
|
270
|
+
},
|
|
271
|
+
disabledButton: {
|
|
272
|
+
opacity: 0.7
|
|
164
273
|
}
|
|
165
274
|
});
|
|
166
275
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","e","__esModule","default","defaultTheme","primaryColor","backgroundColor","textColor","Chat","onSendMessage","theme","message","setMessage","React","useState","messages","setMessages","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_vectorIcons","e","__esModule","default","defaultTheme","primaryColor","backgroundColor","textColor","inputBackgroundColor","Chat","onSendMessage","placeholder","theme","message","setMessage","React","useState","messages","setMessages","refreshing","setRefreshing","onRefresh","useCallback","response","currentTime","Date","toLocaleTimeString","hour","minute","hour12","prev","text","isUser","timestamp","error","console","handleSend","trim","userMessage","chunk","newMessages","lastMessage","length","getMessageStyle","fromUser","styles","messageBubble","botMessage","getTextStyle","messageText","color","createElement","SafeAreaView","style","container","KeyboardAvoidingView","behavior","Platform","OS","content","keyboardVerticalOffset","ScrollView","messagesContainer","contentContainerStyle","messagesContent","refreshControl","RefreshControl","tintColor","colors","progressBackgroundColor","map","msg","i","View","key","messageWrapper","messageShadow","Text","timestampRight","timestampLeft","inputWrapper","inputContainer","TextInput","input","value","onChangeText","placeholderTextColor","multiline","inputButtonsContainer","TouchableOpacity","inputButton","Ionicons","name","size","sendButton","disabledButton","onPress","disabled","exports","StyleSheet","create","flex","padding","paddingBottom","marginBottom","fontSize","marginTop","paddingHorizontal","textAlign","maxWidth","borderRadius","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","alignSelf","lineHeight","paddingVertical","borderTopWidth","borderTopColor","flexDirection","alignItems","margin","maxHeight","justifyContent","marginHorizontal","marginLeft","opacity"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
|
@@ -1,37 +1,85 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { SafeAreaView, Text, StyleSheet, View, TextInput, ScrollView, KeyboardAvoidingView, Platform,
|
|
2
|
+
import { SafeAreaView, Text, StyleSheet, View, TextInput, ScrollView, KeyboardAvoidingView, Platform, TouchableOpacity, RefreshControl } from 'react-native';
|
|
3
|
+
import { Ionicons as Icon } from '@expo/vector-icons';
|
|
3
4
|
const defaultTheme = {
|
|
4
5
|
primaryColor: '#007AFF',
|
|
5
6
|
backgroundColor: '#FFFFFF',
|
|
6
|
-
textColor: '#000000'
|
|
7
|
+
textColor: '#000000',
|
|
8
|
+
inputBackgroundColor: '#FFFFFF'
|
|
7
9
|
};
|
|
8
10
|
export const Chat = ({
|
|
9
11
|
onSendMessage,
|
|
12
|
+
placeholder = 'Type your message here...',
|
|
10
13
|
theme = defaultTheme
|
|
11
14
|
}) => {
|
|
12
15
|
const [message, setMessage] = React.useState('');
|
|
13
16
|
const [messages, setMessages] = React.useState([]);
|
|
17
|
+
const [refreshing, setRefreshing] = React.useState(false);
|
|
18
|
+
const onRefresh = React.useCallback(async () => {
|
|
19
|
+
setRefreshing(true);
|
|
20
|
+
try {
|
|
21
|
+
const response = await onSendMessage("Hi, I'm refreshing the chat!");
|
|
22
|
+
const currentTime = new Date().toLocaleTimeString([], {
|
|
23
|
+
hour: 'numeric',
|
|
24
|
+
minute: '2-digit',
|
|
25
|
+
hour12: true
|
|
26
|
+
});
|
|
27
|
+
setMessages(prev => [...prev, {
|
|
28
|
+
text: response,
|
|
29
|
+
isUser: false,
|
|
30
|
+
timestamp: currentTime
|
|
31
|
+
}]);
|
|
32
|
+
} catch (error) {
|
|
33
|
+
console.error('Error refreshing chat:', error);
|
|
34
|
+
} finally {
|
|
35
|
+
setRefreshing(false);
|
|
36
|
+
}
|
|
37
|
+
}, [onSendMessage]);
|
|
14
38
|
const handleSend = async () => {
|
|
15
39
|
if (!message.trim()) return;
|
|
16
40
|
const userMessage = message;
|
|
17
41
|
setMessage('');
|
|
42
|
+
const currentTime = new Date().toLocaleTimeString([], {
|
|
43
|
+
hour: 'numeric',
|
|
44
|
+
minute: '2-digit',
|
|
45
|
+
hour12: true
|
|
46
|
+
});
|
|
18
47
|
setMessages(prev => [...prev, {
|
|
19
48
|
text: userMessage,
|
|
20
|
-
isUser: true
|
|
49
|
+
isUser: true,
|
|
50
|
+
timestamp: currentTime
|
|
21
51
|
}]);
|
|
22
52
|
try {
|
|
23
|
-
|
|
53
|
+
// Create bot message placeholder before streaming
|
|
24
54
|
setMessages(prev => [...prev, {
|
|
25
|
-
text:
|
|
26
|
-
isUser: false
|
|
55
|
+
text: '',
|
|
56
|
+
isUser: false,
|
|
57
|
+
timestamp: currentTime
|
|
27
58
|
}]);
|
|
59
|
+
const response = await onSendMessage(userMessage, chunk => {
|
|
60
|
+
setMessages(prev => {
|
|
61
|
+
const newMessages = [...prev];
|
|
62
|
+
const lastMessage = newMessages[newMessages.length - 1];
|
|
63
|
+
if (lastMessage && !lastMessage.isUser) {
|
|
64
|
+
lastMessage.text += chunk;
|
|
65
|
+
}
|
|
66
|
+
return newMessages;
|
|
67
|
+
});
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
// Only update if final response is different from streamed content
|
|
71
|
+
setMessages(prev => {
|
|
72
|
+
const newMessages = [...prev];
|
|
73
|
+
const lastMessage = newMessages[newMessages.length - 1];
|
|
74
|
+
if (lastMessage && !lastMessage.isUser && lastMessage.text !== response) {
|
|
75
|
+
lastMessage.text = response;
|
|
76
|
+
}
|
|
77
|
+
return newMessages;
|
|
78
|
+
});
|
|
28
79
|
} catch (error) {
|
|
29
80
|
console.error('Error sending message:', error);
|
|
30
81
|
}
|
|
31
82
|
};
|
|
32
|
-
const containerStyle = [styles.container, {
|
|
33
|
-
backgroundColor: theme.backgroundColor
|
|
34
|
-
}];
|
|
35
83
|
const getMessageStyle = fromUser => [styles.messageBubble, fromUser ? styles.userMessage : styles.botMessage, {
|
|
36
84
|
backgroundColor: fromUser ? theme.primaryColor : '#E8E8E8'
|
|
37
85
|
}];
|
|
@@ -39,33 +87,72 @@ export const Chat = ({
|
|
|
39
87
|
color: fromUser ? '#fff' : theme.textColor
|
|
40
88
|
}];
|
|
41
89
|
return /*#__PURE__*/React.createElement(SafeAreaView, {
|
|
42
|
-
style:
|
|
43
|
-
|
|
90
|
+
style: [styles.container, {
|
|
91
|
+
backgroundColor: theme.backgroundColor
|
|
92
|
+
}]
|
|
44
93
|
}, /*#__PURE__*/React.createElement(KeyboardAvoidingView, {
|
|
45
94
|
behavior: Platform.OS === 'ios' ? 'padding' : 'height',
|
|
46
|
-
style: styles.content
|
|
95
|
+
style: styles.content,
|
|
96
|
+
keyboardVerticalOffset: Platform.OS === 'ios' ? 60 : 0
|
|
47
97
|
}, /*#__PURE__*/React.createElement(ScrollView, {
|
|
48
|
-
style: styles.messagesContainer
|
|
98
|
+
style: styles.messagesContainer,
|
|
99
|
+
contentContainerStyle: styles.messagesContent,
|
|
100
|
+
refreshControl: /*#__PURE__*/React.createElement(RefreshControl, {
|
|
101
|
+
refreshing: refreshing,
|
|
102
|
+
onRefresh: onRefresh,
|
|
103
|
+
tintColor: theme.primaryColor || defaultTheme.primaryColor,
|
|
104
|
+
colors: [theme.primaryColor || defaultTheme.primaryColor],
|
|
105
|
+
progressBackgroundColor: "#ffffff"
|
|
106
|
+
})
|
|
49
107
|
}, messages.map((msg, i) => /*#__PURE__*/React.createElement(View, {
|
|
50
108
|
key: i,
|
|
51
|
-
style:
|
|
109
|
+
style: styles.messageWrapper
|
|
110
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
111
|
+
style: [getMessageStyle(msg.isUser), styles.messageShadow]
|
|
52
112
|
}, /*#__PURE__*/React.createElement(Text, {
|
|
53
113
|
style: getTextStyle(msg.isUser)
|
|
54
|
-
}, msg.text))
|
|
114
|
+
}, msg.text)), /*#__PURE__*/React.createElement(Text, {
|
|
115
|
+
style: [styles.timestamp, msg.isUser ? styles.timestampRight : styles.timestampLeft]
|
|
116
|
+
}, msg.timestamp)))), /*#__PURE__*/React.createElement(View, {
|
|
117
|
+
style: styles.inputWrapper
|
|
118
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
55
119
|
style: styles.inputContainer
|
|
56
120
|
}, /*#__PURE__*/React.createElement(TextInput, {
|
|
57
|
-
style:
|
|
58
|
-
color: theme.textColor
|
|
59
|
-
}],
|
|
121
|
+
style: styles.input,
|
|
60
122
|
value: message,
|
|
61
123
|
onChangeText: setMessage,
|
|
62
|
-
placeholder:
|
|
63
|
-
placeholderTextColor: "#999"
|
|
64
|
-
|
|
65
|
-
|
|
124
|
+
placeholder: placeholder,
|
|
125
|
+
placeholderTextColor: "#999",
|
|
126
|
+
multiline: true
|
|
127
|
+
})), /*#__PURE__*/React.createElement(View, {
|
|
128
|
+
style: styles.inputButtonsContainer
|
|
129
|
+
}, /*#__PURE__*/React.createElement(TouchableOpacity, {
|
|
130
|
+
style: styles.inputButton
|
|
131
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
132
|
+
name: "add",
|
|
133
|
+
size: 28,
|
|
134
|
+
color: "#8E8E93"
|
|
135
|
+
})), /*#__PURE__*/React.createElement(TouchableOpacity, {
|
|
136
|
+
style: styles.inputButton
|
|
137
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
138
|
+
name: "refresh-outline",
|
|
139
|
+
size: 28,
|
|
140
|
+
color: "#8E8E93"
|
|
141
|
+
})), /*#__PURE__*/React.createElement(TouchableOpacity, {
|
|
142
|
+
style: styles.inputButton
|
|
143
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
144
|
+
name: "mic-outline",
|
|
145
|
+
size: 28,
|
|
146
|
+
color: "#8E8E93"
|
|
147
|
+
})), /*#__PURE__*/React.createElement(TouchableOpacity, {
|
|
148
|
+
style: [styles.sendButton, !message.trim() && styles.disabledButton],
|
|
66
149
|
onPress: handleSend,
|
|
67
|
-
|
|
68
|
-
}
|
|
150
|
+
disabled: !message.trim()
|
|
151
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
152
|
+
name: "paper-plane-outline",
|
|
153
|
+
size: 28,
|
|
154
|
+
color: message.trim() ? theme.primaryColor : '#8E8E93'
|
|
155
|
+
}))))));
|
|
69
156
|
};
|
|
70
157
|
const styles = StyleSheet.create({
|
|
71
158
|
container: {
|
|
@@ -73,86 +160,108 @@ const styles = StyleSheet.create({
|
|
|
73
160
|
backgroundColor: '#FFFFFF'
|
|
74
161
|
},
|
|
75
162
|
content: {
|
|
76
|
-
flex: 1
|
|
77
|
-
backgroundColor: '#F8F9FA'
|
|
163
|
+
flex: 1
|
|
78
164
|
},
|
|
79
165
|
messagesContainer: {
|
|
80
|
-
flex: 1
|
|
81
|
-
padding: 20,
|
|
82
|
-
paddingTop: 30
|
|
166
|
+
flex: 1
|
|
83
167
|
},
|
|
84
|
-
|
|
85
|
-
maxWidth: '85%',
|
|
168
|
+
messagesContent: {
|
|
86
169
|
padding: 16,
|
|
170
|
+
paddingBottom: 32
|
|
171
|
+
},
|
|
172
|
+
messageWrapper: {
|
|
173
|
+
marginBottom: 16
|
|
174
|
+
},
|
|
175
|
+
timestamp: {
|
|
176
|
+
fontSize: 12,
|
|
177
|
+
color: '#8E8E93',
|
|
178
|
+
marginTop: 4,
|
|
179
|
+
paddingHorizontal: 4
|
|
180
|
+
},
|
|
181
|
+
timestampRight: {
|
|
182
|
+
textAlign: 'right'
|
|
183
|
+
},
|
|
184
|
+
timestampLeft: {
|
|
185
|
+
textAlign: 'left'
|
|
186
|
+
},
|
|
187
|
+
messageBubble: {
|
|
188
|
+
maxWidth: '70%',
|
|
189
|
+
padding: 12,
|
|
190
|
+
paddingHorizontal: 16,
|
|
87
191
|
borderRadius: 20,
|
|
88
|
-
|
|
89
|
-
|
|
192
|
+
backgroundColor: '#FFFFFF'
|
|
193
|
+
},
|
|
194
|
+
messageShadow: {
|
|
90
195
|
shadowColor: '#000',
|
|
91
196
|
shadowOffset: {
|
|
92
197
|
width: 0,
|
|
93
|
-
height:
|
|
198
|
+
height: 1
|
|
94
199
|
},
|
|
95
|
-
shadowOpacity: 0.
|
|
96
|
-
shadowRadius:
|
|
97
|
-
elevation:
|
|
200
|
+
shadowOpacity: 0.08,
|
|
201
|
+
shadowRadius: 2,
|
|
202
|
+
elevation: 2
|
|
98
203
|
},
|
|
99
204
|
userMessage: {
|
|
100
205
|
alignSelf: 'flex-end',
|
|
101
|
-
backgroundColor: '#
|
|
102
|
-
borderWidth: 1,
|
|
103
|
-
borderColor: 'rgba(0, 0, 0, 0.04)'
|
|
206
|
+
backgroundColor: '#007AFF'
|
|
104
207
|
},
|
|
105
208
|
botMessage: {
|
|
106
209
|
alignSelf: 'flex-start',
|
|
107
|
-
backgroundColor: '#
|
|
108
|
-
borderWidth: 1,
|
|
109
|
-
borderColor: 'rgba(0, 0, 0, 0.04)'
|
|
210
|
+
backgroundColor: '#F2F2F7'
|
|
110
211
|
},
|
|
111
212
|
messageText: {
|
|
112
|
-
fontSize:
|
|
113
|
-
lineHeight: 22
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
213
|
+
fontSize: 16,
|
|
214
|
+
lineHeight: 22
|
|
215
|
+
},
|
|
216
|
+
inputWrapper: {
|
|
217
|
+
backgroundColor: '#FFFFFF',
|
|
218
|
+
paddingHorizontal: 8,
|
|
219
|
+
paddingVertical: 8,
|
|
220
|
+
borderTopWidth: 1,
|
|
221
|
+
borderTopColor: 'rgba(0, 0, 0, 0.1)'
|
|
117
222
|
},
|
|
118
223
|
inputContainer: {
|
|
119
224
|
flexDirection: 'row',
|
|
120
225
|
alignItems: 'center',
|
|
121
|
-
paddingHorizontal:
|
|
122
|
-
paddingVertical:
|
|
226
|
+
paddingHorizontal: 8,
|
|
227
|
+
paddingVertical: 8,
|
|
123
228
|
backgroundColor: '#FFFFFF',
|
|
124
|
-
|
|
125
|
-
|
|
229
|
+
borderRadius: 16,
|
|
230
|
+
margin: 8,
|
|
126
231
|
shadowColor: '#000',
|
|
127
232
|
shadowOffset: {
|
|
128
233
|
width: 0,
|
|
129
|
-
height:
|
|
234
|
+
height: 2
|
|
130
235
|
},
|
|
131
|
-
shadowOpacity: 0.
|
|
132
|
-
shadowRadius:
|
|
133
|
-
elevation:
|
|
134
|
-
marginTop: 'auto'
|
|
236
|
+
shadowOpacity: 0.1,
|
|
237
|
+
shadowRadius: 4,
|
|
238
|
+
elevation: 3
|
|
135
239
|
},
|
|
136
240
|
input: {
|
|
137
241
|
flex: 1,
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
242
|
+
fontSize: 16,
|
|
243
|
+
paddingVertical: 8,
|
|
244
|
+
paddingHorizontal: 12,
|
|
245
|
+
maxHeight: 100,
|
|
246
|
+
color: '#000000'
|
|
247
|
+
},
|
|
248
|
+
inputButtonsContainer: {
|
|
249
|
+
flexDirection: 'row',
|
|
250
|
+
alignItems: 'center',
|
|
251
|
+
justifyContent: 'space-between',
|
|
252
|
+
paddingHorizontal: 8,
|
|
253
|
+
marginTop: 4
|
|
254
|
+
},
|
|
255
|
+
inputButton: {
|
|
256
|
+
padding: 6,
|
|
257
|
+
marginHorizontal: 4
|
|
258
|
+
},
|
|
259
|
+
sendButton: {
|
|
260
|
+
padding: 6,
|
|
261
|
+
marginLeft: 'auto'
|
|
262
|
+
},
|
|
263
|
+
disabledButton: {
|
|
264
|
+
opacity: 0.7
|
|
156
265
|
}
|
|
157
266
|
});
|
|
158
267
|
//# sourceMappingURL=index.js.map
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","SafeAreaView","Text","StyleSheet","View","TextInput","ScrollView","KeyboardAvoidingView","Platform","
|
|
1
|
+
{"version":3,"names":["React","SafeAreaView","Text","StyleSheet","View","TextInput","ScrollView","KeyboardAvoidingView","Platform","TouchableOpacity","RefreshControl","Ionicons","Icon","defaultTheme","primaryColor","backgroundColor","textColor","inputBackgroundColor","Chat","onSendMessage","placeholder","theme","message","setMessage","useState","messages","setMessages","refreshing","setRefreshing","onRefresh","useCallback","response","currentTime","Date","toLocaleTimeString","hour","minute","hour12","prev","text","isUser","timestamp","error","console","handleSend","trim","userMessage","chunk","newMessages","lastMessage","length","getMessageStyle","fromUser","styles","messageBubble","botMessage","getTextStyle","messageText","color","createElement","style","container","behavior","OS","content","keyboardVerticalOffset","messagesContainer","contentContainerStyle","messagesContent","refreshControl","tintColor","colors","progressBackgroundColor","map","msg","i","key","messageWrapper","messageShadow","timestampRight","timestampLeft","inputWrapper","inputContainer","input","value","onChangeText","placeholderTextColor","multiline","inputButtonsContainer","inputButton","name","size","sendButton","disabledButton","onPress","disabled","create","flex","padding","paddingBottom","marginBottom","fontSize","marginTop","paddingHorizontal","textAlign","maxWidth","borderRadius","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","alignSelf","lineHeight","paddingVertical","borderTopWidth","borderTopColor","flexDirection","alignItems","margin","maxHeight","justifyContent","marginHorizontal","marginLeft","opacity"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
interface ChatProps {
|
|
3
|
-
onSendMessage: (message: string) => Promise<string>;
|
|
3
|
+
onSendMessage: (message: string, onStream?: (chunk: string) => void) => Promise<string>;
|
|
4
4
|
placeholder?: string;
|
|
5
5
|
theme?: {
|
|
6
6
|
primaryColor?: string;
|
|
7
7
|
backgroundColor?: string;
|
|
8
8
|
textColor?: string;
|
|
9
|
+
inputBackgroundColor?: string;
|
|
9
10
|
};
|
|
10
11
|
}
|
|
11
12
|
export declare const Chat: React.FC<ChatProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,UAAU,SAAS;IACjB,aAAa,EAAE,CACb,OAAO,EAAE,MAAM,EACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,KAC/B,OAAO,CAAC,MAAM,CAAC,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE;QACN,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,oBAAoB,CAAC,EAAE,MAAM,CAAC;KAC/B,CAAC;CACH;AASD,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA+KpC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-srschat",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.7",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "A modern, sophisticated chat interface for React Native",
|
|
6
6
|
"main": "lib/commonjs/index",
|
|
@@ -33,11 +33,12 @@
|
|
|
33
33
|
"@babel/preset-env": "^7.20.0",
|
|
34
34
|
"@babel/preset-react": "^7.20.0",
|
|
35
35
|
"@babel/preset-typescript": "^7.20.0",
|
|
36
|
-
"@react-native/eslint-config": "^0.72.2",
|
|
37
36
|
"@react-native/babel-preset": "^0.73.18",
|
|
38
37
|
"@react-native/codegen": "^0.73.3",
|
|
38
|
+
"@react-native/eslint-config": "^0.72.2",
|
|
39
39
|
"@types/react": "^18.2.0",
|
|
40
40
|
"@types/react-native": "~0.72.8",
|
|
41
|
+
"@types/react-native-vector-icons": "^6.4.18",
|
|
41
42
|
"@typescript-eslint/eslint-plugin": "^5.0.0",
|
|
42
43
|
"@typescript-eslint/parser": "^5.0.0",
|
|
43
44
|
"eslint": "^8.0.0",
|
|
@@ -58,7 +59,8 @@
|
|
|
58
59
|
},
|
|
59
60
|
"homepage": "https://github.com/alxkai/react-native-srschat#readme",
|
|
60
61
|
"dependencies": {
|
|
61
|
-
"@babel/runtime": "^7.20.0"
|
|
62
|
+
"@babel/runtime": "^7.20.0",
|
|
63
|
+
"@expo/vector-icons": "^14.0.4"
|
|
62
64
|
},
|
|
63
65
|
"react-native-builder-bob": {
|
|
64
66
|
"source": "src",
|
package/src/index.tsx
CHANGED
|
@@ -8,16 +8,22 @@ import {
|
|
|
8
8
|
ScrollView,
|
|
9
9
|
KeyboardAvoidingView,
|
|
10
10
|
Platform,
|
|
11
|
-
|
|
11
|
+
TouchableOpacity,
|
|
12
|
+
RefreshControl,
|
|
12
13
|
} from 'react-native';
|
|
14
|
+
import { Ionicons as Icon } from '@expo/vector-icons';
|
|
13
15
|
|
|
14
16
|
interface ChatProps {
|
|
15
|
-
onSendMessage: (
|
|
17
|
+
onSendMessage: (
|
|
18
|
+
message: string,
|
|
19
|
+
onStream?: (chunk: string) => void
|
|
20
|
+
) => Promise<string>;
|
|
16
21
|
placeholder?: string;
|
|
17
22
|
theme?: {
|
|
18
23
|
primaryColor?: string;
|
|
19
24
|
backgroundColor?: string;
|
|
20
25
|
textColor?: string;
|
|
26
|
+
inputBackgroundColor?: string;
|
|
21
27
|
};
|
|
22
28
|
}
|
|
23
29
|
|
|
@@ -25,37 +31,96 @@ const defaultTheme = {
|
|
|
25
31
|
primaryColor: '#007AFF',
|
|
26
32
|
backgroundColor: '#FFFFFF',
|
|
27
33
|
textColor: '#000000',
|
|
34
|
+
inputBackgroundColor: '#FFFFFF',
|
|
28
35
|
};
|
|
29
36
|
|
|
30
37
|
export const Chat: React.FC<ChatProps> = ({
|
|
31
38
|
onSendMessage,
|
|
39
|
+
placeholder = 'Type your message here...',
|
|
32
40
|
theme = defaultTheme,
|
|
33
41
|
}) => {
|
|
34
42
|
const [message, setMessage] = React.useState('');
|
|
35
|
-
const [messages, setMessages] = React.useState<Array<{
|
|
43
|
+
const [messages, setMessages] = React.useState<Array<{
|
|
44
|
+
text: string;
|
|
45
|
+
isUser: boolean;
|
|
46
|
+
timestamp: string;
|
|
47
|
+
}>>([]);
|
|
48
|
+
const [refreshing, setRefreshing] = React.useState(false);
|
|
49
|
+
|
|
50
|
+
const onRefresh = React.useCallback(async () => {
|
|
51
|
+
setRefreshing(true);
|
|
52
|
+
try {
|
|
53
|
+
const response = await onSendMessage("Hi, I'm refreshing the chat!");
|
|
54
|
+
const currentTime = new Date().toLocaleTimeString([], {
|
|
55
|
+
hour: 'numeric',
|
|
56
|
+
minute: '2-digit',
|
|
57
|
+
hour12: true
|
|
58
|
+
});
|
|
59
|
+
setMessages(prev => [...prev, {
|
|
60
|
+
text: response,
|
|
61
|
+
isUser: false,
|
|
62
|
+
timestamp: currentTime
|
|
63
|
+
}]);
|
|
64
|
+
} catch (error) {
|
|
65
|
+
console.error('Error refreshing chat:', error);
|
|
66
|
+
} finally {
|
|
67
|
+
setRefreshing(false);
|
|
68
|
+
}
|
|
69
|
+
}, [onSendMessage]);
|
|
36
70
|
|
|
37
71
|
const handleSend = async () => {
|
|
38
72
|
if (!message.trim()) return;
|
|
39
73
|
|
|
40
74
|
const userMessage = message;
|
|
41
75
|
setMessage('');
|
|
42
|
-
|
|
76
|
+
const currentTime = new Date().toLocaleTimeString([], {
|
|
77
|
+
hour: 'numeric',
|
|
78
|
+
minute: '2-digit',
|
|
79
|
+
hour12: true
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
setMessages(prev => [...prev, {
|
|
83
|
+
text: userMessage,
|
|
84
|
+
isUser: true,
|
|
85
|
+
timestamp: currentTime
|
|
86
|
+
}]);
|
|
43
87
|
|
|
44
88
|
try {
|
|
45
|
-
|
|
46
|
-
setMessages(prev => [...prev, {
|
|
89
|
+
// Create bot message placeholder before streaming
|
|
90
|
+
setMessages(prev => [...prev, {
|
|
91
|
+
text: '',
|
|
92
|
+
isUser: false,
|
|
93
|
+
timestamp: currentTime
|
|
94
|
+
}]);
|
|
95
|
+
|
|
96
|
+
const response = await onSendMessage(
|
|
97
|
+
userMessage,
|
|
98
|
+
(chunk) => {
|
|
99
|
+
setMessages(prev => {
|
|
100
|
+
const newMessages = [...prev];
|
|
101
|
+
const lastMessage = newMessages[newMessages.length - 1];
|
|
102
|
+
if (lastMessage && !lastMessage.isUser) {
|
|
103
|
+
lastMessage.text += chunk;
|
|
104
|
+
}
|
|
105
|
+
return newMessages;
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
);
|
|
109
|
+
|
|
110
|
+
// Only update if final response is different from streamed content
|
|
111
|
+
setMessages(prev => {
|
|
112
|
+
const newMessages = [...prev];
|
|
113
|
+
const lastMessage = newMessages[newMessages.length - 1];
|
|
114
|
+
if (lastMessage && !lastMessage.isUser && lastMessage.text !== response) {
|
|
115
|
+
lastMessage.text = response;
|
|
116
|
+
}
|
|
117
|
+
return newMessages;
|
|
118
|
+
});
|
|
47
119
|
} catch (error) {
|
|
48
120
|
console.error('Error sending message:', error);
|
|
49
121
|
}
|
|
50
122
|
};
|
|
51
123
|
|
|
52
|
-
const containerStyle = [
|
|
53
|
-
styles.container,
|
|
54
|
-
{
|
|
55
|
-
backgroundColor: theme.backgroundColor,
|
|
56
|
-
},
|
|
57
|
-
];
|
|
58
|
-
|
|
59
124
|
const getMessageStyle = (fromUser: boolean) => [
|
|
60
125
|
styles.messageBubble,
|
|
61
126
|
fromUser ? styles.userMessage : styles.botMessage,
|
|
@@ -68,36 +133,78 @@ export const Chat: React.FC<ChatProps> = ({
|
|
|
68
133
|
];
|
|
69
134
|
|
|
70
135
|
return (
|
|
71
|
-
<SafeAreaView style={
|
|
136
|
+
<SafeAreaView style={[styles.container, { backgroundColor: theme.backgroundColor }]}>
|
|
72
137
|
<KeyboardAvoidingView
|
|
73
138
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
74
139
|
style={styles.content}
|
|
140
|
+
keyboardVerticalOffset={Platform.OS === 'ios' ? 60 : 0}
|
|
75
141
|
>
|
|
76
|
-
<ScrollView
|
|
142
|
+
<ScrollView
|
|
143
|
+
style={styles.messagesContainer}
|
|
144
|
+
contentContainerStyle={styles.messagesContent}
|
|
145
|
+
refreshControl={
|
|
146
|
+
<RefreshControl
|
|
147
|
+
refreshing={refreshing}
|
|
148
|
+
onRefresh={onRefresh}
|
|
149
|
+
tintColor={theme.primaryColor || defaultTheme.primaryColor}
|
|
150
|
+
colors={[theme.primaryColor || defaultTheme.primaryColor]}
|
|
151
|
+
progressBackgroundColor="#ffffff"
|
|
152
|
+
/>
|
|
153
|
+
}
|
|
154
|
+
>
|
|
77
155
|
{messages.map((msg, i) => (
|
|
78
|
-
<View
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
156
|
+
<View key={i} style={styles.messageWrapper}>
|
|
157
|
+
<View style={[getMessageStyle(msg.isUser), styles.messageShadow]}>
|
|
158
|
+
<Text style={getTextStyle(msg.isUser)}>
|
|
159
|
+
{msg.text}
|
|
160
|
+
</Text>
|
|
161
|
+
</View>
|
|
162
|
+
<Text style={[
|
|
163
|
+
styles.timestamp,
|
|
164
|
+
msg.isUser ? styles.timestampRight : styles.timestampLeft
|
|
165
|
+
]}>
|
|
166
|
+
{msg.timestamp}
|
|
84
167
|
</Text>
|
|
85
168
|
</View>
|
|
86
169
|
))}
|
|
87
170
|
</ScrollView>
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
171
|
+
|
|
172
|
+
<View style={styles.inputWrapper}>
|
|
173
|
+
<View style={styles.inputContainer}>
|
|
174
|
+
<TextInput
|
|
175
|
+
style={styles.input}
|
|
176
|
+
value={message}
|
|
177
|
+
onChangeText={setMessage}
|
|
178
|
+
placeholder={placeholder}
|
|
179
|
+
placeholderTextColor="#999"
|
|
180
|
+
multiline
|
|
181
|
+
/>
|
|
182
|
+
</View>
|
|
183
|
+
<View style={styles.inputButtonsContainer}>
|
|
184
|
+
<TouchableOpacity style={styles.inputButton}>
|
|
185
|
+
<Icon name="add" size={28} color="#8E8E93" />
|
|
186
|
+
</TouchableOpacity>
|
|
187
|
+
<TouchableOpacity style={styles.inputButton}>
|
|
188
|
+
<Icon name="refresh-outline" size={28} color="#8E8E93" />
|
|
189
|
+
</TouchableOpacity>
|
|
190
|
+
<TouchableOpacity style={styles.inputButton}>
|
|
191
|
+
<Icon name="mic-outline" size={28} color="#8E8E93" />
|
|
192
|
+
</TouchableOpacity>
|
|
193
|
+
<TouchableOpacity
|
|
194
|
+
style={[
|
|
195
|
+
styles.sendButton,
|
|
196
|
+
!message.trim() && styles.disabledButton
|
|
197
|
+
]}
|
|
198
|
+
onPress={handleSend}
|
|
199
|
+
disabled={!message.trim()}
|
|
200
|
+
>
|
|
201
|
+
<Icon
|
|
202
|
+
name="paper-plane-outline"
|
|
203
|
+
size={28}
|
|
204
|
+
color={message.trim() ? theme.primaryColor : '#8E8E93'}
|
|
205
|
+
/>
|
|
206
|
+
</TouchableOpacity>
|
|
207
|
+
</View>
|
|
101
208
|
</View>
|
|
102
209
|
</KeyboardAvoidingView>
|
|
103
210
|
</SafeAreaView>
|
|
@@ -111,84 +218,106 @@ const styles = StyleSheet.create({
|
|
|
111
218
|
},
|
|
112
219
|
content: {
|
|
113
220
|
flex: 1,
|
|
114
|
-
backgroundColor: '#F8F9FA',
|
|
115
221
|
},
|
|
116
222
|
messagesContainer: {
|
|
117
223
|
flex: 1,
|
|
118
|
-
padding: 20,
|
|
119
|
-
paddingTop: 30,
|
|
120
224
|
},
|
|
121
|
-
|
|
122
|
-
maxWidth: '85%',
|
|
225
|
+
messagesContent: {
|
|
123
226
|
padding: 16,
|
|
124
|
-
|
|
227
|
+
paddingBottom: 32,
|
|
228
|
+
},
|
|
229
|
+
messageWrapper: {
|
|
125
230
|
marginBottom: 16,
|
|
231
|
+
},
|
|
232
|
+
timestamp: {
|
|
233
|
+
fontSize: 12,
|
|
234
|
+
color: '#8E8E93',
|
|
235
|
+
marginTop: 4,
|
|
236
|
+
paddingHorizontal: 4,
|
|
237
|
+
},
|
|
238
|
+
timestampRight: {
|
|
239
|
+
textAlign: 'right',
|
|
240
|
+
},
|
|
241
|
+
timestampLeft: {
|
|
242
|
+
textAlign: 'left',
|
|
243
|
+
},
|
|
244
|
+
messageBubble: {
|
|
245
|
+
maxWidth: '70%',
|
|
246
|
+
padding: 12,
|
|
247
|
+
paddingHorizontal: 16,
|
|
248
|
+
borderRadius: 20,
|
|
126
249
|
backgroundColor: '#FFFFFF',
|
|
250
|
+
},
|
|
251
|
+
messageShadow: {
|
|
127
252
|
shadowColor: '#000',
|
|
128
253
|
shadowOffset: {
|
|
129
254
|
width: 0,
|
|
130
|
-
height:
|
|
255
|
+
height: 1,
|
|
131
256
|
},
|
|
132
|
-
shadowOpacity: 0.
|
|
133
|
-
shadowRadius:
|
|
134
|
-
elevation:
|
|
257
|
+
shadowOpacity: 0.08,
|
|
258
|
+
shadowRadius: 2,
|
|
259
|
+
elevation: 2,
|
|
135
260
|
},
|
|
136
261
|
userMessage: {
|
|
137
262
|
alignSelf: 'flex-end',
|
|
138
|
-
backgroundColor: '#
|
|
139
|
-
borderWidth: 1,
|
|
140
|
-
borderColor: 'rgba(0, 0, 0, 0.04)',
|
|
263
|
+
backgroundColor: '#007AFF',
|
|
141
264
|
},
|
|
142
265
|
botMessage: {
|
|
143
266
|
alignSelf: 'flex-start',
|
|
144
|
-
backgroundColor: '#
|
|
145
|
-
borderWidth: 1,
|
|
146
|
-
borderColor: 'rgba(0, 0, 0, 0.04)',
|
|
267
|
+
backgroundColor: '#F2F2F7',
|
|
147
268
|
},
|
|
148
269
|
messageText: {
|
|
149
|
-
fontSize:
|
|
270
|
+
fontSize: 16,
|
|
150
271
|
lineHeight: 22,
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
272
|
+
},
|
|
273
|
+
inputWrapper: {
|
|
274
|
+
backgroundColor: '#FFFFFF',
|
|
275
|
+
paddingHorizontal: 8,
|
|
276
|
+
paddingVertical: 8,
|
|
277
|
+
borderTopWidth: 1,
|
|
278
|
+
borderTopColor: 'rgba(0, 0, 0, 0.1)',
|
|
154
279
|
},
|
|
155
280
|
inputContainer: {
|
|
156
281
|
flexDirection: 'row',
|
|
157
282
|
alignItems: 'center',
|
|
158
|
-
paddingHorizontal:
|
|
159
|
-
paddingVertical:
|
|
283
|
+
paddingHorizontal: 8,
|
|
284
|
+
paddingVertical: 8,
|
|
160
285
|
backgroundColor: '#FFFFFF',
|
|
161
|
-
|
|
162
|
-
|
|
286
|
+
borderRadius: 16,
|
|
287
|
+
margin: 8,
|
|
163
288
|
shadowColor: '#000',
|
|
164
289
|
shadowOffset: {
|
|
165
290
|
width: 0,
|
|
166
|
-
height:
|
|
291
|
+
height: 2,
|
|
167
292
|
},
|
|
168
|
-
shadowOpacity: 0.
|
|
169
|
-
shadowRadius:
|
|
170
|
-
elevation:
|
|
171
|
-
marginTop: 'auto',
|
|
293
|
+
shadowOpacity: 0.1,
|
|
294
|
+
shadowRadius: 4,
|
|
295
|
+
elevation: 3,
|
|
172
296
|
},
|
|
173
297
|
input: {
|
|
174
298
|
flex: 1,
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
299
|
+
fontSize: 16,
|
|
300
|
+
paddingVertical: 8,
|
|
301
|
+
paddingHorizontal: 12,
|
|
302
|
+
maxHeight: 100,
|
|
303
|
+
color: '#000000',
|
|
304
|
+
},
|
|
305
|
+
inputButtonsContainer: {
|
|
306
|
+
flexDirection: 'row',
|
|
307
|
+
alignItems: 'center',
|
|
308
|
+
justifyContent: 'space-between',
|
|
309
|
+
paddingHorizontal: 8,
|
|
310
|
+
marginTop: 4,
|
|
311
|
+
},
|
|
312
|
+
inputButton: {
|
|
313
|
+
padding: 6,
|
|
314
|
+
marginHorizontal: 4,
|
|
315
|
+
},
|
|
316
|
+
sendButton: {
|
|
317
|
+
padding: 6,
|
|
318
|
+
marginLeft: 'auto',
|
|
319
|
+
},
|
|
320
|
+
disabledButton: {
|
|
321
|
+
opacity: 0.7,
|
|
193
322
|
},
|
|
194
323
|
});
|