|
| 1 | +import {Image, PermissionsAndroid, ScrollView, Text, TextInput, TouchableOpacity, View} from "react-native"; |
| 2 | +import {useContext, useEffect, useRef, useState} from "react"; |
| 3 | +import Context from "../Context/Context"; |
| 4 | +import {Person} from "../Components/ChatPage/Person"; |
| 5 | +import {TopHeader} from "../Components/Global/TopHeader"; |
| 6 | +import {Ai} from "../Components/ChatPage/Ai"; |
| 7 | +import {useToast} from "react-native-toast-notifications"; |
| 8 | +import axios from "axios"; |
| 9 | +import {AiThinking} from "../Components/ChatPage/AiThinking"; |
| 10 | +import Voice from '@react-native-community/voice'; |
| 11 | + |
| 12 | +export const HistoryChatPage = ({navigation,route}) => { |
| 13 | + const {History,setHistory} = useContext(Context) |
| 14 | + const {Style1}=useContext(Context) |
| 15 | + const [scrollEnabled, setScrollEnabled] = useState(true) |
| 16 | + const Toast = useToast() |
| 17 | + const [loading,setloading]=useState(false) |
| 18 | + const [VoiceRecording,setVoiceRecording]=useState(false) |
| 19 | + const [requestBody,setRequestBody]=useState([]) |
| 20 | + const [value,setvalue]=useState("") |
| 21 | + const [chat,setchat]=useState(route.params.data) |
| 22 | + async function OnPressSend(val) { |
| 23 | + if(val!==""){ |
| 24 | + const requestBodyData=[...requestBody] |
| 25 | + requestBodyData.push({content:val}) |
| 26 | + setRequestBody(requestBodyData) |
| 27 | + const chats=[...chat] |
| 28 | + chats.push({ |
| 29 | + message:val, |
| 30 | + type:"user" |
| 31 | + }) |
| 32 | + setchat(chats) |
| 33 | + setvalue("") |
| 34 | + } |
| 35 | + } |
| 36 | + const scrollViewRef = useRef(); |
| 37 | + useEffect(()=>{ |
| 38 | + if(requestBody.length>0&&chat[chat.length-1].type==="user"){ |
| 39 | + setloading(true) |
| 40 | + let config = { |
| 41 | + method: 'post', |
| 42 | + maxBodyLength: Infinity, |
| 43 | + url: 'https://generativelanguage.googleapis.com/v1beta2/models/chat-bison-001:generateMessage?key=AIzaSyD46fzT8jTrrC8mFSoZWtHFzoCh79MpkYk', |
| 44 | + headers: { |
| 45 | + 'Content-Type': 'application/json', |
| 46 | + }, |
| 47 | + data : JSON.stringify({ |
| 48 | + "prompt": {"messages": requestBody} |
| 49 | + }) |
| 50 | + } |
| 51 | + axios.request(config).then((r)=>{ |
| 52 | + if(r.data.filters){ |
| 53 | + console.log("No") |
| 54 | + const chats=[...chat] |
| 55 | + chats.push({ |
| 56 | + message:"My name is O2.ai, developed by Ankit Kumar Shah. How can I help you?", |
| 57 | + type:"ai" |
| 58 | + }) |
| 59 | + setchat(chats) |
| 60 | + setloading(false) |
| 61 | + return |
| 62 | + } |
| 63 | + const chats=[...chat] |
| 64 | + chats.push({ |
| 65 | + message:r.data.candidates[0].content, |
| 66 | + type:"ai" |
| 67 | + }) |
| 68 | + setchat(chats) |
| 69 | + const requestBodyData=[...requestBody] |
| 70 | + requestBodyData.push({content:r.data.candidates[0].content}) |
| 71 | + setRequestBody(requestBodyData) |
| 72 | + setloading(false) |
| 73 | + }).catch((e)=>{ |
| 74 | + setloading(false) |
| 75 | + if(e.message==="Network Error"){ |
| 76 | + Toast.show("No Internet 😟",{ |
| 77 | + type: "danger", |
| 78 | + placement: "top", |
| 79 | + duration: 3000, |
| 80 | + offset: 30, |
| 81 | + animationType: "zoom-in", |
| 82 | + }) |
| 83 | + } |
| 84 | + console.log(e.message) |
| 85 | + }) |
| 86 | + } |
| 87 | + },[requestBody]) |
| 88 | + useEffect(() => { |
| 89 | + Voice.onSpeechStart = onSpeechStartHandler; |
| 90 | + Voice.onSpeechEnd = onSpeechEndHandler; |
| 91 | + Voice.onSpeechResults = onSpeechResultsHandler; |
| 92 | + |
| 93 | + return () => { |
| 94 | + Voice.destroy().then(Voice.removeAllListeners); |
| 95 | + } |
| 96 | + }, []) |
| 97 | + //History |
| 98 | + useEffect(() => { |
| 99 | + // if(chat.length===2){ |
| 100 | + // const Prev=[...History] |
| 101 | + // Prev.push([]) |
| 102 | + // Prev[Prev.length-1]=[...chat] |
| 103 | + // setHistory(Prev) |
| 104 | + // // console.log(Prev) |
| 105 | + // } |
| 106 | + // if(chat.length>2){ |
| 107 | + // const Prev=[...History] |
| 108 | + // Prev[Prev.length-1]=[...chat] |
| 109 | + // setHistory(Prev) |
| 110 | + // } |
| 111 | + const Prev=[...History] |
| 112 | + Prev[route.params.index]=[...chat] |
| 113 | + setHistory(Prev) |
| 114 | + }, [chat]); |
| 115 | + const onSpeechStartHandler = (e) => { |
| 116 | + console.log("start handler==>>>", e) |
| 117 | + } |
| 118 | + const onSpeechEndHandler = (e) => { |
| 119 | + setVoiceRecording(false) |
| 120 | + console.log("stop handler", e) |
| 121 | + } |
| 122 | + |
| 123 | + const onSpeechResultsHandler = (e) => { |
| 124 | + let text = e.value[0] |
| 125 | + setvalue(text) |
| 126 | + console.log("speech result handler", e) |
| 127 | + } |
| 128 | + |
| 129 | + const startRecording = async () => { |
| 130 | + setVoiceRecording(true) |
| 131 | + const audio=await PermissionsAndroid.check(PermissionsAndroid.PERMISSIONS.RECORD_AUDIO) |
| 132 | + if(audio===false){ |
| 133 | + Toast.show("No Audio Permission 😟",{ |
| 134 | + type: "danger", |
| 135 | + placement: "top", |
| 136 | + duration: 3000, |
| 137 | + offset: 30, |
| 138 | + animationType: "zoom-in", |
| 139 | + }) |
| 140 | + setVoiceRecording(false) |
| 141 | + } |
| 142 | + |
| 143 | + try { |
| 144 | + await Voice.start('en-Us') |
| 145 | + } catch (error) { |
| 146 | + console.log("error raised", error) |
| 147 | + } |
| 148 | + } |
| 149 | + |
| 150 | + const stopRecording = async () => { |
| 151 | + try { |
| 152 | + await Voice.stop() |
| 153 | + } catch (error) { |
| 154 | + console.log("error raised", error) |
| 155 | + } |
| 156 | + } |
| 157 | + return ( |
| 158 | + <View style={{ |
| 159 | + flex:1, |
| 160 | + backgroundColor:Style1.color3 |
| 161 | + }}> |
| 162 | + <TopHeader navigation={navigation} text={"Chat"}/> |
| 163 | + |
| 164 | + <ScrollView onScrollBeginDrag={()=>{ |
| 165 | + setScrollEnabled(false) |
| 166 | + }} |
| 167 | + automaticallyAdjustKeyboardInsets={false} |
| 168 | + keyboardShouldPersistTaps={"never"} |
| 169 | + overScrollMode={"always"} bounces={true} bouncesZoom={true} ref={scrollViewRef} |
| 170 | + decelerationRate={"fast"} onContentSizeChange={() => { |
| 171 | + if(scrollEnabled) { |
| 172 | + scrollViewRef.current.scrollToEnd({animated: true}); |
| 173 | + } |
| 174 | + }}> |
| 175 | + {chat.map((e,i)=>{ |
| 176 | + if(e.type==="user"){ |
| 177 | + return <Person text={e.message} key={i}/> |
| 178 | + }else{ |
| 179 | + if(i<route.params.data.length){ |
| 180 | + return <Ai text={e.message} key={i} noLoading={true}/> |
| 181 | + } |
| 182 | + else{ |
| 183 | + return <Ai text={e.message} key={i} /> |
| 184 | + } |
| 185 | + |
| 186 | + } |
| 187 | + })} |
| 188 | + {loading&&<AiThinking/>} |
| 189 | + </ScrollView> |
| 190 | + <View style={{ |
| 191 | + paddingHorizontal:10, |
| 192 | + backgroundColor:Style1.color5, |
| 193 | + flexDirection:"row", |
| 194 | + height:70, |
| 195 | + alignItems:"center", |
| 196 | + justifyContent:"center" |
| 197 | + }}> |
| 198 | + <TouchableOpacity onPress={()=>{ |
| 199 | + if(!VoiceRecording){ |
| 200 | + console.log(Voice.isAvailable()) |
| 201 | + startRecording() |
| 202 | + setVoiceRecording(true) |
| 203 | + }else { |
| 204 | + setVoiceRecording(false) |
| 205 | + stopRecording() |
| 206 | + } |
| 207 | + |
| 208 | + }} style={{ |
| 209 | + height:40, |
| 210 | + width:40, |
| 211 | + borderRadius:100000, |
| 212 | + overflow:"hidden", |
| 213 | + marginRight:5, |
| 214 | + justifyContent:"center", |
| 215 | + alignItems:"center" |
| 216 | + }}> |
| 217 | + <Image source={(VoiceRecording)?require("../Assets/listning.gif"):require("../Assets/mic.png")} style={{ |
| 218 | + height:VoiceRecording?"100%":"70%", |
| 219 | + width:VoiceRecording?"100%":"70%", |
| 220 | + borderRadius:100000 |
| 221 | + }}/> |
| 222 | + </TouchableOpacity> |
| 223 | + <TextInput autoFocus={true} value={value} onChangeText={(text)=>{ |
| 224 | + setvalue(text) |
| 225 | + }} style={{ |
| 226 | + backgroundColor:Style1.color5, |
| 227 | + fontSize:15, |
| 228 | + color:Style1.color4, |
| 229 | + flex:1 |
| 230 | + }} placeholder={"Ask Anything..."} placeholderTextColor={Style1.color4}/> |
| 231 | + {!loading&&<TouchableOpacity onPress={() => { |
| 232 | + if (value === "") { |
| 233 | + Toast.show("Please type something...😐😐", { |
| 234 | + type: "danger", |
| 235 | + placement: "top", |
| 236 | + duration: 3000, |
| 237 | + offset: 30, |
| 238 | + animationType: "zoom-in", |
| 239 | + }) |
| 240 | + return |
| 241 | + } |
| 242 | + setScrollEnabled(true) |
| 243 | + OnPressSend(value) |
| 244 | + }} style={{ |
| 245 | + height: "100%", |
| 246 | + alignItems: "center", |
| 247 | + justifyContent: "center" |
| 248 | + }}> |
| 249 | + <Image source={require("../Assets/send.png")} style={{ |
| 250 | + height: 50, |
| 251 | + width: 30, |
| 252 | + objectFit: "contain" |
| 253 | + }}/> |
| 254 | + </TouchableOpacity>} |
| 255 | + {loading&& <View style={{ |
| 256 | + height:"100%", |
| 257 | + alignItems:"center", |
| 258 | + justifyContent:"center" |
| 259 | + }}> |
| 260 | + <Image source={require("../Assets/loading.gif")} style={{ |
| 261 | + height:"100%", |
| 262 | + width:70, |
| 263 | + }}/> |
| 264 | + </View>} |
| 265 | + </View> |
| 266 | + </View> |
| 267 | + ) |
| 268 | +} |
0 commit comments