Toppr Insta-learn

This is a React library which can be used for interacting with the tutors for doubt resolution of the students.

To install the package, run the following command in the terminal

npm install @toppr-engg/insta-learn

or

yarn add @toppr-engg/insta-learn

Install the Peer Dependencies in your project

yarn add react react-dom react-redux redux redux-saga

import InstaLearn from '@toppr-engg/insta-learn'
function App() {
  return (
    <InstaLearn
      clientId={clientId} //required --> string
      token={token} //required --> string
      apiBaseUrl={apiBaseUrl} //optional --> string. Determines which env(preprod or prod) to initiate for doubts module
      chatImage={chatImage} //optional --> object --> image data from doc upload to render image in one-to-one chat window
      queryImage={queryImage} //optional --> object --> image data from doc upload API to start a new tutor session with image as a question
      queryText={queryText} //optional --> string --> a query string to start a new tutor session with text as a question
      subjectList={subjectList} //required --> array of strings --> Array of subject names to be passed to show some or all of those subjects in the subject selection screen - Tenant driven
      subjectId={subjectId} //optional --> string --> Preferred for auto-detection of subject. If skipped, the subject selection screen is shown in doubts package
      showSessionList={showSessionList} //optional --> boolean --> To render the chat history list for the user
      onModalCloseCallback={onModalCloseCallback} // To handle event related to close of doubts package
      searchResultCount={searchResultCount} // --> number --> count of searched results
      handleToggleAskDoubtButton={handleToggleAskDoubtButton} //required --> function --> To enable/disable Ask-a-doubt Button based on liveSessionCount passed as a params in the function.
      handleSessionInMeet={handleSessionInMeet} // optional --> function --> To enable/disable the header based on params passed in a function.
      handleNotificationEvent={handleNotificationEvent} // optional --> function  -->  to handle notificationEvent based on params passed in function
      collapsedState={collapsedState} // optional --> bool -->  true --> to open live in collapsed state and vice-versa
      handleGoToHomeClick={handleGoToHomeClick} //optional --> func --> redirect to homepage
      preventSocketConnections={preventSocketConnections} //optional --> boolean --> to prevent the socket connection. --> by default it is false.
      isChatOnly={isChatOnly} //optional --> boolean --> by default false --> to enable the chat feature only when isChatOnly is true.
    />
  )
}

Function Definitions

// callback  to handle notificationEvent based on params
// @param {string} event - event Name
// @param {object} payload - data based on that particular event
function handleNotificationEvent({ event, payload }) {}

// callback to enable/disable the header based on params
// @param {boolean} inMeet - true --> disable the header and vice-versa
function handleSessionInMeet({ inMeet }) {}

// callback to enable/disable Ask-a-doubt Button based on params
// @param {number} liveSessionCount - total no. of live session
// @param {number} nVideoSession - no. of video session (closed + active)

function handleToggleAskDoubtButton({ liveSessionCount, nVideoSession }) {}

// event related to close of Insta learn Session

function onModalCloseCallback() {}

clientId and token are to be generated by tenant app. For token generation process, refer https://www.notion.so/toppr/Ask-Service-Integration-doc-4678a12881e44d11afad79b16f8cd55a

subjectList is tenant driven. What you pass is what yo get to see in doubts package

For the Subject Confidence Flow, if the confidence is high then send the subjectId as a prop and through that the new session will be automatically created for the subject and the chat screen will open. If subjectId is not passed then the manual subject selection screen will be shown.