react native chatgpt
1.0.0
Pembungkus React Native di sekitar ChatGPT oleh OpenAI untuk mengintegrasikannya secara mulus dengan aplikasi Anda. Ini menangani otentikasi, mengalirkan tanggapan, dan melacak percakapan. Semua tanpa memerlukan server.
ChatGptProvideruseChatGptconversationId dan messageId bersama dengan pesannyaIni bukan perpustakaan ChatGPT resmi. Ini merupakan upaya untuk mempermudah integrasi ChatGPT dengan aplikasi React Native. Oleh karena itu, harap perlakukan ini sebagai percobaan dan gunakan dengan hati-hati dalam produksi.
? Jalankan aplikasi contoh camilan untuk melihatnya beraksi. Kode sumber untuk contoh ada di bawah folder /example.
npm install react-native-chatgpt Anda juga perlu menginstal react-native-webview dan expo-secure-store
npx expo install react-native-webview expo-secure-storeTidak diperlukan langkah tambahan.
Anda juga perlu menginstal react-native-webview , react-native-vector-icons dan expo-secure-store
npm install react-native-webview react-native-vector-icons expo-secure-storeSetelah penginstalan selesai, Anda juga harus mengikuti beberapa petunjuk tambahan untuk menyiapkan perpustakaan:
Pustaka ini mengekspor komponen penyedia dan hook sebagai API utamanya.
ChatGptProviderKomponen penyedia harus ditempatkan di root aplikasi React Native Anda seperti yang ditunjukkan pada contoh di bawah ini:
import { ChatGptProvider } from 'react-native-chatgpt' ;
import App from './App' ;
const Root = ( ) => {
return (
< ChatGptProvider >
< App / >
< / ChatGptProvider >
) ;
} ; Props ChatGptProvider berikut memungkinkan Anda menyesuaikan tampilan modal yang menangani autentikasi dengan ChatGPT, dan batas waktu untuk permintaan chatbot.
| Nama | Diperlukan | Jenis | Keterangan |
|---|---|---|---|
children | Ya | React.Node | Pohon komponen aplikasi Anda |
containerStyles | TIDAK | StyleProp<ViewStyle> | Gaya ekstra diterapkan ke penampung tampilan web |
backdropStyles | TIDAK | StyleProp<ViewStyle> | Gaya ekstra diterapkan pada tampilan latar belakang. Secara default menggunakan warna latar belakang semi-transparan rgba(0, 0, 0, 0.5) |
renderCustomCloseIcon | TIDAK | (closeModal: () => void) => React.Node | Perender tombol tutup khusus untuk ditempatkan di atas tampilan web. Secara default, ini menampilkan tanda silang hitam (X) di sudut kanan atas. Jangan lupa untuk menghubungkan fungsi closeModal yang disediakan sebagai argumen dengan acara onPress Anda |
requestTimeout | TIDAK | number | Jumlah waktu maksimum dalam ms Anda bersedia menunggu permintaan normal sebelum membatalkannya, defaultnya adalah 30000 ms |
streamedRequestTimeout | TIDAK | number | Jumlah waktu maksimum dalam ms Anda bersedia menunggu permintaan berbasis streaming sebelum membatalkannya, defaultnya adalah 15000 ms |
useChatGptHook mengembalikan objek dengan properti berikut:
statusstatus: 'initializing' | 'logged-out' | 'getting_auth_token' | 'authenticated' ;initializing : menunjukkan perpustakaan sedang dimulai. Anda tidak boleh berasumsi apa pun mengenai status autentikasi dan menunggu hingga nilai ini berubah menjadi logged-out atau authenticated .logged-out mencerminkan Anda belum mengautentikasi atau token akses ChatGPT Anda telah kedaluwarsagetting_auth_token : keadaan sementara yang berlangsung selama beberapa detik tepat setelah modal login ditutup. Hal ini mencerminkan fakta bahwa perpustakaan mendapatkan token autentikasi ChatGPT di latar belakang. Anda dapat menggunakan status ini untuk merender indikator pemuatan.authenticated : menandakan Anda masuk. Hanya dengan status ini Anda akan dapat berinteraksi dengan bot obrolan. ChatGPT menerbitkan token JWT yang masa berlakunya habis dalam 7 hari, jadi Anda harus mengautentikasi ulang kira-kira sekali seminggu. Perpustakaan akan melaporkannya dengan mengubah status dari authenticated menjadi logged-out .
login function login ( ) : void ;Sebuah fungsi yang, ketika dijalankan, membuka modal dan memicu aliran autentikasi ChatGPT.
Setelah berhasil diselesaikan, status akan berubah dari logged-out menjadi getting_auth_token (selama beberapa detik) dan akhirnya menjadi authenticated
sendMessageInilah fungsi inti perpustakaan. Ini mengirimkan pesan ke chatbot dan mengembalikan respons. Ini dapat digunakan dalam dua cara berbeda tergantung pada argumen yang diajukan:
function sendMessage (
message : string ,
options ?: {
conversationId ?: string ;
messageId ?: string ;
}
) : Promise < {
message : string ;
messageId : string ;
conversationId : string ;
} > ;Ini mengembalikan janji dengan tanggapannya. Ini adalah cara paling sederhana untuk menggunakannya, namun akan lebih lambat dalam memproses respons karena menunggu hingga respons lengkap tersedia.
Jika Anda ingin melacak percakapan, gunakan conversationId dan messageId di objek respons, dan teruskan ke sendMessage lagi.
Jika server menolak permintaan atau batas waktu diaktifkan, ChatGptError akan ditampilkan.
import React from 'react' ;
import { Button } from 'react-native' ;
import { useChatGpt , ChatGptError } from 'react-native-chatgpt' ;
const Example = ( ) => {
const { sendMessage } = useChatGpt ( ) ;
const handleSendMessage = async ( ) => {
try {
const { message , conversationId , messageId } = await sendMessage (
'Outline possible topics for an SEO article'
) ;
// After the user has read the response, send another message
const { message : followUp } = await sendMessage (
'Elaborate on the first suggestion' ,
{
conversationId ,
messageId ,
}
) ;
} catch ( error ) {
if ( error instanceof ChatGptError ) {
// Handle error accordingly
}
}
} ;
return < Button onPress = { handleSendMessage } title = "Send message" / > ;
} ; function sendMessage ( args : {
message : string ;
options ?: {
conversationId ?: string ;
messageId ?: string ;
} ;
onAccumulatedResponse ?: ( response : {
message : string ;
messageId : string ;
conversationId : string ;
isDone ?: boolean ;
} ) => void ;
onError ?: ( err : ChatGptError ) => void ;
} ) : void ;Ia menerima fungsi panggilan balik yang akan terus dipanggil dengan pembaruan respons. Versi ini berguna untuk skenario di mana respons perlu ditampilkan segera setelah tersedia, serupa dengan cara kerja API ChatGPT di taman bermain web.
Jika Anda ingin melacak percakapan, gunakan conversationId dan messageId di objek respons, dan teruskan ke sendMessage lagi.
Periksa properti isDone di objek respons untuk mendeteksi kapan respons selesai.
Jika terjadi kesalahan, callback onError dipanggil dengan ChatGptError .
import React , { useState } from 'react' ;
import { Button } from 'react-native' ;
import { useChatGpt , ChatGptError } from 'react-native-chatgpt' ;
const StreamExample = ( ) => {
const { sendMessage } = useChatGpt ( ) ;
const [ response , setResponse ] = useState ( '' ) ;
const handleSendMessage = ( ) => {
sendMessage ( {
message : 'Outline possible topics for an SEO article' ,
onAccumulatedResponse : ( { message , isDone } ) => {
setResponse ( message ) ;
if ( isDone ) {
// The response is complete, you can send another message
}
} ,
onError : ( e ) => {
// Handle error accordingly
} ,
} ) ;
} ;
return (
< View style = { { flex : 1 } } >
< Button onPress = { handleSendMessage } title = "Get streamed response" / >
< Text > { response } < / Text >
< / View >
) ;
} ;Lihat panduan berkontribusi untuk mempelajari cara berkontribusi pada repositori dan alur kerja pengembangan.
MIT © Raul Gomez Acuna
Jika menurut Anda proyek ini menarik, mohon pertimbangkan untuk mengikuti saya di Twitter
