react native chatgpt
1.0.0
Un contenedor React Native para ChatGPT de OpenAI para integrarlo perfectamente con sus aplicaciones. Maneja la autenticación, las respuestas transmitidas y realiza un seguimiento de las conversaciones. Todo sin necesidad de un servidor.
ChatGptProvideruseChatGptconversationId y messageId junto con el mensaje.Esta no es una biblioteca oficial de ChatGPT. Es un esfuerzo por facilitar la integración de ChatGPT con las aplicaciones React Native. Como tal, trátelo como experimental y utilícelo con precaución en producción.
? Ejecute la aplicación de ejemplo de refrigerios para verla en acción. El código fuente del ejemplo se encuentra en la carpeta /ejemplo.
npm install react-native-chatgpt También necesitas instalar react-native-webview y expo-secure-store
npx expo install react-native-webview expo-secure-storeNo se necesitan pasos adicionales.
También necesita instalar react-native-webview , react-native-vector-icons y expo-secure-store
npm install react-native-webview react-native-vector-icons expo-secure-storeUna vez completada la instalación, también debes seguir algunas instrucciones adicionales para configurar las bibliotecas:
Esta biblioteca exporta un componente de proveedor y un gancho como API principal.
ChatGptProviderEl componente del proveedor debe colocarse en la raíz de su aplicación React Native como se muestra en el siguiente ejemplo:
import { ChatGptProvider } from 'react-native-chatgpt' ;
import App from './App' ;
const Root = ( ) => {
return (
< ChatGptProvider >
< App / >
< / ChatGptProvider >
) ;
} ; Los siguientes accesorios ChatGptProvider le permiten personalizar la apariencia del modo que maneja la autenticación con ChatGPT y los tiempos de espera para las solicitudes del chatbot.
| Nombre | Requerido | Tipo | Descripción |
|---|---|---|---|
children | Sí | React.Node | El árbol de componentes de su aplicación |
containerStyles | No | StyleProp<ViewStyle> | Estilo adicional aplicado al contenedor de vista web. |
backdropStyles | No | StyleProp<ViewStyle> | Estilo adicional aplicado a la vista de fondo. Por defecto utiliza un color de fondo semitransparente rgba(0, 0, 0, 0.5) |
renderCustomCloseIcon | No | (closeModal: () => void) => React.Node | Un renderizador de botón de cierre personalizado que se colocará en la parte superior de la vista web. De forma predeterminada, muestra una cruz negra (X) en la esquina superior derecha. No olvide conectar la función closeModal proporcionada como argumento con su evento onPress |
requestTimeout | No | number | La cantidad máxima de tiempo en ms que está dispuesto a esperar para una solicitud normal antes de cancelarla, el valor predeterminado es 30000 ms. |
streamedRequestTimeout | No | number | La cantidad máxima de tiempo en ms que está dispuesto a esperar por una solicitud basada en transmisión antes de cancelarla, el valor predeterminado es 15000 ms. |
useChatGptEl gancho devuelve un objeto con las siguientes propiedades:
statusstatus: 'initializing' | 'logged-out' | 'getting_auth_token' | 'authenticated' ;initializing : indica que la biblioteca se está iniciando. No debe asumir nada con respecto al estado de autenticación y esperar hasta que este valor cambie a logged-out o authenticated .logged-out refleja que aún no te has autenticado o que tu token de acceso ChatGPT ha caducadogetting_auth_token : estado transitorio que dura unos segundos justo después de que se descarta el modo de inicio de sesión. Refleja el hecho de que la biblioteca recibe un token de autenticación ChatGPT en segundo plano. Puede utilizar este estado para representar un indicador de carga.authenticated : indica que ha iniciado sesión. Solo bajo este estado podrá interactuar con el chatbot. ChatGPT emite tokens JWT que caducan en 7 días, por lo que tendría que volver a autenticarse aproximadamente una vez por semana. La biblioteca lo informará cambiando el estado de authenticated a logged-out .
login function login ( ) : void ;Una función que, cuando se ejecuta, abre el modal y activa el flujo de autenticación ChatGPT.
Después de completar con éxito, status cambiará de logged-out a getting_auth_token (durante unos segundos) y finalmente a authenticated
sendMessageÉsta es la función principal de la biblioteca. Envía un mensaje al chatbot y devuelve la respuesta. Se puede utilizar de dos maneras diferentes según los argumentos pasados:
function sendMessage (
message : string ,
options ?: {
conversationId ?: string ;
messageId ?: string ;
}
) : Promise < {
message : string ;
messageId : string ;
conversationId : string ;
} > ;Devuelve una promesa con la respuesta. Esta es la forma más sencilla de usarlo, pero será más lento procesar la respuesta mientras espera que la respuesta completa esté disponible.
Si desea realizar un seguimiento de la conversación, utilice el conversationId y messageId en el objeto de respuesta y páselos a sendMessage nuevamente.
Si el servidor rechaza la solicitud o se activa el tiempo de espera, se generará un ChatGptError .
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 ;Acepta una función de devolución de llamada que se invocará constantemente con actualizaciones de respuesta. Esta versión es útil para escenarios en los que la respuesta debe mostrarse tan pronto como esté disponible, de forma similar a la forma en que funciona la API ChatGPT en el patio de juegos web.
Si desea realizar un seguimiento de la conversación, utilice el conversationId y messageId en el objeto de respuesta y páselos a sendMessage nuevamente.
Verifique la propiedad isDone en el objeto de respuesta para detectar cuándo se completa la respuesta.
Si se produce un error, la devolución de llamada onError se llama con 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 >
) ;
} ;Consulte la guía de contribución para aprender cómo contribuir al repositorio y al flujo de trabajo de desarrollo.
MIT © Raúl Gómez Acuña
Si encuentra interesante este proyecto, considere seguirme en Twitter.
