Skip to content

Commit 032e6ba

Browse files
Infinite-NullInfinite-Null
committed
Design change
1 parent 979637b commit 032e6ba

18 files changed

+615
-343
lines changed

‎Assets/ai.png‎

209 KB
Loading

‎Assets/alexander-nechunaev-BuXxoMsvB6g-unsplash.jpg‎

-649 KB
Binary file not shown.

‎Assets/artem-bryzgalov-r2CAjGQ0gSI-unsplash.jpg‎

-1.49 MB
Binary file not shown.

‎Assets/audio.png‎

122 KB
Loading

‎Assets/christopher-gower-m_HRfLhgABo-unsplash.jpg‎

-1020 KB
Binary file not shown.

‎Assets/mail.png‎

93.1 KB
Loading

‎Assets/pdf.png‎

83 KB
Loading

‎Assets/webpage.png‎

147 KB
Loading

‎Components/ChatPage/Ai.js‎

Lines changed: 153 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,156 @@
1-
import React, {useContext, useState} from "react";
2-
import Context from "../../Context/Context";
3-
import {Clipboard, Text, TouchableOpacity, View} from "react-native";
4-
import {FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
5-
import {faCopy, faRobot} from "@fortawesome/free-solid-svg-icons";
6-
import {useToast} from "react-native-toast-notifications";
7-
import StreamType from "../Global/StreamType";
1+
/* 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';
9+
import Markdown from 'react-native-markdown-display';
810

9-
export const Ai = ({text,noLoading=false}) => {
10-
const{Style1}=useContext(Context)
11-
const toast=useToast()
12-
return (
13-
<View style={{
14-
backgroundColor:Style1.color5,
15-
elevation:1,
16-
marginVertical:10
11+
export const Ai = ({text, noLoading = false}) => {
12+
const width = Dimensions.get('window').width;
13+
const toast = useToast();
14+
return (
15+
<View
16+
style={{
17+
marginVertical: 10,
18+
padding: width * 0.02,
19+
justifyContent: 'flex-end',
20+
alignItems: 'flex-end',
21+
}}>
22+
<View
23+
style={{
24+
padding: width * 0.04,
25+
flexDirection: 'column',
26+
alignItems: 'flex-end',
27+
backgroundColor: '#5248a8',
28+
alignSelf: 'flex-end',
29+
maxWidth: width * 0.9,
30+
borderRadius: 10,
31+
elevation: 1,
1732
}}>
18-
<TouchableOpacity onPress={()=>{
19-
Clipboard.setString(text)
20-
toast.show("Copied!",{
21-
type: "normal",
22-
placement: "bottom",
23-
duration: 4000,
24-
offset: 30,
25-
animationType: "slide-in",
26-
})
27-
}} style={{
28-
position:"absolute",
29-
right:10,
30-
top:5
31-
}}>
32-
<FontAwesomeIcon icon={ faCopy } style={{
33-
padding:10,
34-
color:'gray'
35-
}}/>
36-
</TouchableOpacity>
37-
<View style={{
38-
paddingHorizontal:10,
39-
paddingTop:10,
40-
flexDirection:"row",
41-
alignItems:"center",
42-
}}>
43-
<FontAwesomeIcon icon={ faRobot } style={{
44-
padding:10,
45-
color:Style1.color2
46-
}}/>
47-
<Text style={{
48-
color:Style1.color2,
49-
fontSize:17,
50-
paddingLeft:5
51-
}}>O2</Text>
52-
</View>
53-
{!noLoading&&<StreamType selectable={true} style={{
54-
color:Style1.color4,
55-
padding:15,
56-
paddingTop:2,
57-
paddingLeft:27,
58-
marginTop:3,
59-
fontSize:17,
60-
}} text={text.split(" ")} delay={1}/>}
61-
{noLoading&&<Text selectable={true} style={{
62-
color:Style1.color4,
63-
padding:15,
64-
paddingTop:2,
65-
paddingLeft:27,
66-
marginTop:3,
67-
fontSize:17,
68-
}}>{text}</Text>}
69-
</View>
70-
)
33+
<Markdown
34+
style={{
35+
fence: {
36+
backgroundColor: '#080808',
37+
color: 'rgba(243, 232, 130, 0.88)',
38+
fontSize: width * 0.027,
39+
borderRadius: 10,
40+
borderColor: 'rgba(243, 232, 130, 0.88)',
41+
},
42+
code_block: {
43+
backgroundColor: '#080808',
44+
color: 'rgba(243, 232, 130, 0.88)',
45+
fontSize: width * 0.027,
46+
borderRadius: 10,
47+
borderColor: 'rgba(243, 232, 130, 0.88)',
48+
},
49+
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)',
55+
},
56+
list_item: {
57+
color: 'rgba(243, 243, 243, 0.88)',
58+
fontSize: width * 0.0335,
59+
marginVertical: 10,
60+
height: 'auto',
61+
alignSelf: 'flex-start',
62+
flexBasis: 1,
63+
},
64+
}}>
65+
{text}
66+
</Markdown>
67+
</View>
68+
</View>
69+
);
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> */
71156
}

‎Components/ChatPage/Person.js‎

Lines changed: 44 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,48 @@
1-
import {Image, Text, View} from "react-native";
2-
import {useContext} from "react";
3-
import Context from "../../Context/Context";
4-
import {faUser} from "@fortawesome/free-solid-svg-icons";
5-
import {FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
1+
/* eslint-disable react/react-in-jsx-scope */
2+
/* eslint-disable react-native/no-inline-styles */
3+
import {Dimensions, Image, Text, View} from 'react-native';
4+
import {useContext} from 'react';
5+
import Context from '../../Context/Context';
6+
import {faUser} from '@fortawesome/free-solid-svg-icons';
7+
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome';
68

79
export const Person = ({text}) => {
8-
const{Style1}=useContext(Context)
9-
return (
10-
<View style={{
11-
marginVertical:10
10+
const {Style1} = useContext(Context);
11+
const width = Dimensions.get('window').width;
12+
return (
13+
<View
14+
style={{
15+
marginVertical: 10,
16+
padding: width * 0.02,
17+
}}>
18+
<View
19+
style={{
20+
padding: width * 0.04,
21+
flexDirection: 'column',
22+
alignItems: 'flex-start',
23+
backgroundColor: '#292250',
24+
alignSelf: 'flex-start',
25+
maxWidth: width * 0.9,
26+
borderRadius: 10,
27+
elevation: 1,
1228
}}>
13-
<View style={{
14-
paddingHorizontal:10,
15-
paddingTop:10,
16-
flexDirection:"row",
17-
alignItems:"center",
18-
}}>
19-
<FontAwesomeIcon icon={ faUser } style={{
20-
padding:10,
21-
color:Style1.color1
22-
}}/>
23-
<Text style={{
24-
color:Style1.color1,
25-
fontSize:17,
26-
paddingLeft:5
27-
}}>You</Text>
28-
</View>
29-
<Text selectable={true} style={{
30-
color:Style1.color4,
31-
padding:15,
32-
paddingTop:2,
33-
paddingLeft:27,
34-
marginTop:3,
35-
fontSize:17,
36-
}}>{text}</Text>
29+
<Text
30+
style={{
31+
color: 'rgba(108, 141, 248, 0.75)',
32+
fontSize: width * 0.03,
33+
}}>
34+
You
35+
</Text>
3736

38-
</View>
39-
)
40-
}
37+
<Text
38+
selectable={true}
39+
style={{
40+
color: 'rgba(236, 236, 236, 0.88)',
41+
fontSize: width * 0.04,
42+
}}>
43+
{text}
44+
</Text>
45+
</View>
46+
</View>
47+
);
48+
};

0 commit comments

Comments
 (0)