react native chatgpt
1.0.0
Un wrapper React Native autour de ChatGPT par OpenAI pour l'intégrer de manière transparente à vos applications. Il gère l'authentification, les réponses diffusées en continu et le suivi des conversations. Le tout sans avoir besoin d'un serveur.
ChatGptProvideruseChatGptconversationId et messageId avec le messageCe n'est pas une bibliothèque ChatGPT officielle. Il s'agit d'un effort visant à faciliter l'intégration de ChatGPT avec les applications React Native. En tant que tel, veuillez le considérer comme expérimental et l’utiliser avec prudence en production .
? Exécutez l'exemple d'application de collation pour la voir en action. Le code source de l'exemple se trouve dans le dossier /example.
npm install react-native-chatgpt Vous devez également installer react-native-webview et expo-secure-store
npx expo install react-native-webview expo-secure-storeAucune étape supplémentaire n’est nécessaire.
Vous devez également installer react-native-webview , react-native-vector-icons et expo-secure-store
npm install react-native-webview react-native-vector-icons expo-secure-storeUne fois l'installation terminée, vous devez également suivre quelques instructions supplémentaires pour configurer les bibliothèques :
Cette bibliothèque exporte un composant fournisseur et un hook comme API principale.
ChatGptProviderLe composant fournisseur doit être placé à la racine de votre application React Native comme indiqué dans l'exemple ci-dessous :
import { ChatGptProvider } from 'react-native-chatgpt' ;
import App from './App' ;
const Root = ( ) => {
return (
< ChatGptProvider >
< App / >
< / ChatGptProvider >
) ;
} ; Les accessoires ChatGptProvider suivants vous permettent de personnaliser l'apparence du modal qui gère l'authentification avec ChatGPT et les délais d'attente pour les requêtes du chatbot.
| Nom | Requis | Taper | Description |
|---|---|---|---|
children | Oui | React.Node | L'arborescence des composants de votre application |
containerStyles | Non | StyleProp<ViewStyle> | Style supplémentaire appliqué au conteneur WebView |
backdropStyles | Non | StyleProp<ViewStyle> | Style supplémentaire appliqué à la vue en arrière-plan. Par défaut, il utilise une couleur de fond semi-transparente rgba(0, 0, 0, 0.5) |
renderCustomCloseIcon | Non | (closeModal: () => void) => React.Node | Un moteur de rendu de bouton de fermeture personnalisé à placer au-dessus de la vue Web. Par défaut, il affiche une croix noire (X) dans le coin supérieur droit. N'oubliez pas de connecter la fonction closeModal fournie en argument à votre événement onPress |
requestTimeout | Non | number | La durée maximale en ms pendant laquelle vous êtes prêt à attendre une requête normale avant de l'annuler, la valeur par défaut est 30 000 ms. |
streamedRequestTimeout | Non | number | La durée maximale en ms pendant laquelle vous êtes prêt à attendre une requête basée sur le streaming avant de l'annuler, la valeur par défaut est de 15 000 ms. |
useChatGptLe hook renvoie un objet avec les propriétés suivantes :
statusstatus: 'initializing' | 'logged-out' | 'getting_auth_token' | 'authenticated' ;initializing : indique que la bibliothèque démarre. Vous ne devez rien supposer concernant l'état d'authentification et attendre que cette valeur passe à logged-out ou authenticated .logged-out indique soit que vous n'êtes pas encore authentifié, soit que votre jeton d'accès ChatGPT a expirégetting_auth_token : état transitoire qui dure quelques secondes juste après la fermeture du modal de connexion. Cela reflète le fait que la bibliothèque reçoit un jeton d'authentification ChatGPT en arrière-plan. Vous pouvez utiliser ce statut pour afficher un indicateur de chargement.authenticated : signale que vous êtes connecté. Ce n'est que sous ce statut que vous pourrez interagir avec le chat bot. ChatGPT émet des jetons JWT qui expirent dans 7 jours, vous devrez donc vous réauthentifier environ une fois par semaine. La bibliothèque signalera cela en changeant le statut d' authenticated à logged-out .
login function login ( ) : void ;Une fonction qui, une fois exécutée, ouvre le modal et déclenche le flux d'authentification ChatGPT.
Une fois l'opération terminée, status passera de logged-out à getting_auth_token (pendant quelques secondes) et enfin à authenticated
sendMessageC'est la fonction principale de la bibliothèque. Il envoie un message au chatbot et renvoie la réponse. Il peut être utilisé de deux manières différentes selon les arguments passés :
function sendMessage (
message : string ,
options ?: {
conversationId ?: string ;
messageId ?: string ;
}
) : Promise < {
message : string ;
messageId : string ;
conversationId : string ;
} > ;Il renvoie une promesse avec la réponse. C'est la manière la plus simple de l'utiliser, mais le traitement de la réponse sera plus lent car il attend que la réponse complète soit disponible.
Si vous souhaitez suivre la conversation, utilisez conversationId et messageId dans l'objet de réponse et transmettez-les à nouveau à sendMessage .
Si le serveur rejette la demande ou si le délai d'attente se déclenche, une ChatGptError sera générée.
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 ;Il accepte une fonction de rappel qui sera constamment invoquée avec les mises à jour des réponses. Cette version est utile pour les scénarios dans lesquels la réponse doit être affichée dès qu'elle est disponible, de la même manière que l'API ChatGPT fonctionne sur le terrain de jeu Web.
Si vous souhaitez suivre la conversation, utilisez conversationId et messageId dans l'objet de réponse et transmettez-les à nouveau à sendMessage .
Vérifiez la propriété isDone dans l'objet de réponse pour détecter quand la réponse est terminée.
Si une erreur se produit, le rappel onError est appelé avec un 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 >
) ;
} ;Consultez le guide de contribution pour savoir comment contribuer au référentiel et au workflow de développement.
MIT © Raul Gomez Acuna
Si vous avez trouvé ce projet intéressant, pensez à me suivre sur Twitter
