Skip to content

Commit c9f0c72

Browse files
Infinite-NullInfinite-Null
committed
Improved performance and added animation
1 parent 032e6ba commit c9f0c72

File tree

8 files changed

+376
-297
lines changed

8 files changed

+376
-297
lines changed

‎Components/ChatPage/Ai.js‎

Lines changed: 142 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,33 @@
11
/* eslint-disable react-native/no-inline-styles */
2-
import React, {useContext, useState} from 'react';
3-
import Context from '../../Context/Context';
4-
import {
5-
Dimensions,
6-
View,
7-
} from 'react-native';
8-
import {useToast} from 'react-native-toast-notifications';
2+
import React, {memo} from 'react';
3+
import {Clipboard, Dimensions, TouchableOpacity, View} from 'react-native';
94
import Markdown from 'react-native-markdown-display';
5+
import {faCopy} from '@fortawesome/free-solid-svg-icons';
6+
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome';
7+
import {useToast} from 'react-native-toast-notifications';
8+
import * as Animatable from 'react-native-animatable';
109

11-
export const Ai = ({text, noLoading = false}) => {
10+
function Ai({text}) {
1211
const width = Dimensions.get('window').width;
13-
const toast = useToast();
12+
const Toast = useToast();
13+
const fadeIn = {
14+
from: {
15+
opacity: 0,
16+
padding: 0,
17+
marginVertical: 0,
18+
},
19+
to: {
20+
opacity: 1,
21+
padding: width * 0.02,
22+
marginVertical: 4,
23+
},
24+
};
1425
return (
15-
<View
26+
<Animatable.View
27+
animation={fadeIn}
28+
easing="ease-in-out"
29+
duration={250}
1630
style={{
17-
marginVertical: 10,
18-
padding: width * 0.02,
1931
justifyContent: 'flex-end',
2032
alignItems: 'flex-end',
2133
}}>
@@ -28,10 +40,12 @@ export const Ai = ({text, noLoading = false}) => {
2840
alignSelf: 'flex-end',
2941
maxWidth: width * 0.9,
3042
borderRadius: 10,
31-
elevation: 1,
3243
}}>
3344
<Markdown
3445
style={{
46+
text: {
47+
color: 'rgb(236, 236, 236)',
48+
},
3549
fence: {
3650
backgroundColor: '#080808',
3751
color: 'rgba(243, 232, 130, 0.88)',
@@ -47,14 +61,14 @@ export const Ai = ({text, noLoading = false}) => {
4761
borderColor: 'rgba(243, 232, 130, 0.88)',
4862
},
4963
code_inline: {
50-
backgroundColor: '#080808',
51-
color: 'rgba(243, 232, 130, 0.88)',
52-
fontSize: width * 0.027,
53-
borderRadius: 10,
54-
borderColor: 'rgba(243, 232, 130, 0.88)',
64+
backgroundColor: 'rgba(0,0,0,0)',
65+
color: 'rgba(214, 200, 74, 1.00)',
66+
fontSize: width * 0.034,
67+
borderRadius: 1000,
68+
fontWeight: 'bold',
5569
},
5670
list_item: {
57-
color: 'rgba(243, 243, 243, 0.88)',
71+
color: 'rgba(243, 243, 243, 0.98)',
5872
fontSize: width * 0.0335,
5973
marginVertical: 10,
6074
height: 'auto',
@@ -64,93 +78,115 @@ export const Ai = ({text, noLoading = false}) => {
6478
}}>
6579
{text}
6680
</Markdown>
81+
<TouchableOpacity
82+
onPress={() => {
83+
Clipboard.setString(text);
84+
Toast.show('Copied to clipboard', {
85+
animationDuration: 90,
86+
type: 'success',
87+
placement: 'center',
88+
successColor: 'rgba(55, 145, 62, 1.00)',
89+
duration: 1200,
90+
offset: 30,
91+
animationType: 'zoom-in',
92+
});
93+
}}>
94+
<FontAwesomeIcon
95+
icon={faCopy}
96+
style={{
97+
color: 'white',
98+
}}
99+
/>
100+
</TouchableOpacity>
67101
</View>
68-
</View>
102+
</Animatable.View>
69103
);
70-
};
71-
72-
{
73-
/* <View
74-
style={{
75-
backgroundColor: Style1.color5,
76-
elevation: 1,
77-
marginVertical: 10,
78-
}}>
79-
<TouchableOpacity
80-
onPress={() => {
81-
Clipboard.setString(text);
82-
toast.show('Copied!', {
83-
type: 'normal',
84-
placement: 'bottom',
85-
duration: 4000,
86-
offset: 30,
87-
animationType: 'slide-in',
88-
});
89-
}}
90-
style={{
91-
position: 'absolute',
92-
right: 10,
93-
top: 5,
94-
}}>
95-
<FontAwesomeIcon
96-
icon={faCopy}
97-
style={{
98-
padding: 10,
99-
color: 'gray',
100-
}}
101-
/>
102-
</TouchableOpacity>
103-
<View
104-
style={{
105-
paddingHorizontal: 10,
106-
paddingTop: 10,
107-
flexDirection: 'row',
108-
alignItems: 'center',
109-
}}>
110-
<FontAwesomeIcon
111-
icon={faRobot}
112-
style={{
113-
padding: 10,
114-
color: Style1.color2,
115-
}}
116-
/>
117-
<Text
118-
style={{
119-
color: Style1.color2,
120-
fontSize: 17,
121-
paddingLeft: 5,
122-
}}>
123-
O2
124-
</Text>
125-
</View>
126-
{!noLoading && (
127-
<StreamType
128-
selectable={true}
129-
style={{
130-
color: Style1.color4,
131-
padding: 15,
132-
paddingTop: 2,
133-
paddingLeft: 27,
134-
marginTop: 3,
135-
fontSize: 17,
136-
}}
137-
text={text.split(' ')}
138-
delay={1}
139-
/>
140-
)}
141-
{noLoading && (
142-
<Text
143-
selectable={true}
144-
style={{
145-
color: Style1.color4,
146-
padding: 15,
147-
paddingTop: 2,
148-
paddingLeft: 27,
149-
marginTop: 3,
150-
fontSize: 17,
151-
}}>
152-
{text}
153-
</Text>
154-
)}
155-
</View> */
156104
}
105+
106+
export default memo(Ai);
107+
108+
// {
109+
// /* <View
110+
// style={{
111+
// backgroundColor: Style1.color5,
112+
// elevation: 1,
113+
// marginVertical: 10,
114+
// }}>
115+
// <TouchableOpacity
116+
// onPress={() => {
117+
// Clipboard.setString(text);
118+
// toast.show('Copied!', {
119+
// type: 'normal',
120+
// placement: 'bottom',
121+
// duration: 4000,
122+
// offset: 30,
123+
// animationType: 'slide-in',
124+
// });
125+
// }}
126+
// style={{
127+
// position: 'absolute',
128+
// right: 10,
129+
// top: 5,
130+
// }}>
131+
// <FontAwesomeIcon
132+
// icon={faCopy}
133+
// style={{
134+
// padding: 10,
135+
// color: 'gray',
136+
// }}
137+
// />
138+
// </TouchableOpacity>
139+
// <View
140+
// style={{
141+
// paddingHorizontal: 10,
142+
// paddingTop: 10,
143+
// flexDirection: 'row',
144+
// alignItems: 'center',
145+
// }}>
146+
// <FontAwesomeIcon
147+
// icon={faRobot}
148+
// style={{
149+
// padding: 10,
150+
// color: Style1.color2,
151+
// }}
152+
// />
153+
// <Text
154+
// style={{
155+
// color: Style1.color2,
156+
// fontSize: 17,
157+
// paddingLeft: 5,
158+
// }}>
159+
// O2
160+
// </Text>
161+
// </View>
162+
// {!noLoading && (
163+
// <StreamType
164+
// selectable={true}
165+
// style={{
166+
// color: Style1.color4,
167+
// padding: 15,
168+
// paddingTop: 2,
169+
// paddingLeft: 27,
170+
// marginTop: 3,
171+
// fontSize: 17,
172+
// }}
173+
// text={text.split(' ')}
174+
// delay={1}
175+
// />
176+
// )}
177+
// {noLoading && (
178+
// <Text
179+
// selectable={true}
180+
// style={{
181+
// color: Style1.color4,
182+
// padding: 15,
183+
// paddingTop: 2,
184+
// paddingLeft: 27,
185+
// marginTop: 3,
186+
// fontSize: 17,
187+
// }}>
188+
// {text}
189+
// </Text>
190+
// )}
191+
// </View> */
192+
// }

‎Components/ChatPage/AiThinking.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import Context from "../../Context/Context";
33
import {Clipboard, Text, TouchableOpacity, View} from "react-native";
44
import {FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
55
import {faCopy, faRobot} from "@fortawesome/free-solid-svg-icons";
6-
import {useToast} from "react-native-toast-notifications";
76
import TypeWriter from "react-native-typewriter";
87

98
export const AiThinking = () => {
@@ -18,7 +17,6 @@ export const AiThinking = () => {
1817
"Riding the waves of data...👩‍💻"
1918
]
2019
const [writing,setWriting]=useState(1)
21-
const{Style1}=useContext(Context)
2220
return (
2321
<View style={{
2422
backgroundColor:Style1.color5,

‎Components/ChatPage/ChatScroll.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {FlatList} from 'react-native';
2+
import React, {memo, useRef} from 'react';
3+
import Person from './Person';
4+
import Ai from './Ai';
5+
6+
function ChatScroll({chat, scrollEnabled}) {
7+
const scrollViewRef = useRef();
8+
return (
9+
<FlatList
10+
automaticallyAdjustKeyboardInsets={false}
11+
keyboardShouldPersistTaps={'never'}
12+
overScrollMode={'always'}
13+
bounces={true}
14+
bouncesZoom={true}
15+
ref={scrollViewRef}
16+
decelerationRate={'fast'}
17+
onContentSizeChange={() => {
18+
if (scrollEnabled) {
19+
scrollViewRef.current.scrollToEnd({animated: true});
20+
}
21+
}}
22+
data={chat}
23+
renderItem={({item}) => {
24+
if (item.type === 'user') {
25+
return <Person text={item.message} />;
26+
} else {
27+
return <Ai text={item.message} />;
28+
}
29+
}}
30+
keyExtractor={(_, index) => index.toString()}
31+
/>
32+
);
33+
}
34+
35+
export default memo(ChatScroll);
36+
37+
// {chat.map((e, i) => {
38+
//
39+
// })}

0 commit comments

Comments
 (0)