react native chatgpt下载 - react native chatgpt源代码下载

react native chatgpt

Ai源码

1.0.0

下载

反应本机chatgpt

OpenAI 围绕 ChatGPT 的 React Native 包装器，可将其与您的应用程序无缝集成。它处理身份验证、流式响应并跟踪对话。一切都不需要服务器。

反应本机chatgpt.mp4

特征
免责声明
尝试一下
安装
应用程序编程接口
- ChatGptProvider
- useChatGpt
贡献
制作人员
执照

特征

100% 客户端：您可以轻松地将功能强大的聊天机器人集成到您的应用程序中，而无需自定义后端
⚡ 流媒体支持：一旦可用，即可体验闪电般的快速响应，类似于 ChatGPT 网络游乐场
？对话式：ChatGPT 会记住您之前所说的话。通过随消息一起发送conversationId和messageId来保持对话继续进行
兼容世博会：无需弹出即可享受此组件
类型安全：完全用 TS 编写
小吃示例：提供了小吃链接，因此您可以在浏览器中尝试一下

免责声明

这不是官方 ChatGPT 库。这是为了让 ChatGPT 与 React Native 应用程序的集成变得更容易。因此，请将其视为实验性的，并在生产中谨慎使用。

尝试一下

？运行小吃示例应用程序以查看其运行情况。该示例的源代码位于 /example 文件夹下。

安装

npm install react-native-chatgpt

世博会

您还需要安装react-native-webview和expo-secure-store

npx expo install react-native-webview expo-secure-store

不需要额外的步骤。

裸 React Native 应用程序

您还需要安装react-native-webview 、 react-native-vector-icons和expo-secure-store

npm install react-native-webview react-native-vector-icons expo-secure-store

安装完成后，您还应该按照一些附加说明来设置库：

反应本机网页视图
反应本机矢量图标
展会安全商店

应用程序编程接口

该库导出一个提供程序组件和一个钩子作为其主要 API。

`ChatGptProvider`

提供程序组件应放置在 React Native 应用程序的根目录下，如下例所示：

 import { ChatGptProvider } from 'react-native-chatgpt' ;
import App from './App' ;

const Root = ( ) => {
  return (
    < ChatGptProvider >
      < App / >
    < / ChatGptProvider >
  ) ;
} ;

道具

以下ChatGptProvider属性允许您自定义处理 ChatGPT 身份验证的模式的外观以及聊天机器人请求的超时。

姓名	必需的	类型	描述
`children`	是的	`React.Node`	您的应用程序组件树
`containerStyles`	不	`StyleProp<ViewStyle>`	应用于 webview 容器的额外样式
`backdropStyles`	不	`StyleProp<ViewStyle>`	应用于背景视图的额外样式。默认情况下它使用半透明背景颜色`rgba(0, 0, 0, 0.5)`
`renderCustomCloseIcon`	不	`(closeModal: () => void) => React.Node`	一个自定义的关闭按钮渲染器放置在 webview 的顶部。默认情况下，它在右上角呈现一个黑色十字 (X)。不要忘记将作为参数提供的closeModal 函数与`onPress`事件连接起来
`requestTimeout`	不	`number`	在取消正常请求之前您愿意等待的最长时间（以毫秒为单位），默认为 30000 毫秒
`streamedRequestTimeout`	不	`number`	在取消基于流的请求之前您愿意等待的最长时间（以毫秒为单位），默认为 15000 毫秒

`useChatGpt`

该钩子返回一个具有以下属性的对象：

`status`

status: 'initializing' | 'logged-out' | 'getting_auth_token' | 'authenticated' ;

initializing ：表示库正在启动。您不应该假设任何有关身份验证状态的信息，并等待该值更改为logged-out或authenticated 。
logged-out反映您尚未经过身份验证或您的 ChatGPT 访问令牌已过期
getting_auth_token ：登录模式关闭后持续几秒钟的短暂状态。它反映了该库正在后台获取 ChatGPT 身份验证令牌的事实。您可以使用此状态来呈现加载指示器。
authenticated ：表示您已登录。只有在此状态下，您才能与聊天机器人交互。

ChatGPT 颁发的 JWT 令牌将在 7 天后过期，因此您大约每周必须重新进行一次身份验证。库将通过将状态从authenticated更改为logged-out来报告这一情况。

`login`

 function login ( ) : void ;

执行时打开模式并触发 ChatGPT 身份验证流程的函数。

成功完成后， status将从logged-out变为getting_auth_token （几秒钟），最后变为authenticated

`sendMessage`

这是该库的核心功能。它向聊天机器人发送消息并返回响应。根据传递的参数，它可以以两种不同的方式使用：

标准

 function sendMessage (
  message : string ,
  options ?: {
    conversationId ?: string ;
    messageId ?: string ;
  }
) : Promise < {
  message : string ;
  messageId : string ;
  conversationId : string ;
} > ;

它随响应返回一个承诺。这是最简单的使用方法，但处理响应的速度会比较慢，因为它需要等待完整的响应可用。

如果要跟踪对话，请使用响应对象中的conversationId和messageId ，并将它们再次传递给sendMessage 。

如果服务器拒绝请求或超时，则会抛出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 ;

它接受一个回调函数，该函数将随着响应更新而不断调用。此版本对于需要在响应可用时立即显示响应的场景非常有用，类似于 ChatGPT API 在网络游乐场上的工作方式。

如果要跟踪对话，请使用响应对象中的conversationId和messageId ，并将它们再次传递给sendMessage 。

检查响应对象中的isDone属性以检测响应何时完成。

如果发生错误，则会使用ChatGptError调用onError回调。

 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 >
  ) ;
} ;