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