Babblebots-react NPM

babblebots-react

Utility React components for Babblebots integration

Installation

Install the package via npm:

npm install babblebots-react --save

Usage

Interview Designer Component

The InterviewDesignerDialog component allows you to create and edit interview requests, configure settings, and publish interviews.

Props Overview

apiKey (string): Your organization's integration key provided by the Babblebots team. Required for authenticating API requests.
jdUrl (string): Public URL of the job description. This will be embedded in the interview request sent via WhatsApp.
jdText (string): Parsed text of the job description, highlighting relevant skills for the interview.
onPublish (function): Callback function triggered after successfully creating an interview. It receives the interview data as an argument.
interviewid (string, optional): The ID of the interview if you are editing an existing one.
isOpen (boolean): Controls whether the Interview Designer dialog is initially open.
setisOpen (function): Callback function to update the open/closed state of the Interview Designer dialog.
subcompanyid (string): ID of the sub-company (if applicable).

Example Usage

import React, { useState } from 'react'
import { Button, Stack } from '@mui/material'
import { InterviewDesignerDialog } from 'babblebots-react'
import 'babblebots-react/dist/index.css'

const App = () => {
  const [isOpen, setIsOpen] = useState(false)
  const [interviewId, setInterviewId] = useState('2584')

  return (
    <Stack
      sx={{ width: '100vw', height: '100vh' }}
      alignItems='center'
      justifyContent='center'
    >
      <Button variant='contained' onClick={() => setIsOpen(true)}>
        Create Interview
      </Button>

      <InterviewDesignerDialog
        apiKey="your_api_key"
        jdUrl="https://example.com/job-description"
        jd="<BLOB>"
        jdText="Job Description Details"
        onPublish={(data) => {
          console.log('Interview Data:', data)
          setInterviewId(data.interview_type)
        }}
        isOpen={isOpen}
        setisOpen={setIsOpen}
        interviewid={interviewId}
        subcompanyid="1234"
      />
    </Stack>
  )
}

export default App

Example Data Returned by `onPublish` Callback

{
  "role_name": "Technical Lead - Fullstack .NET",
  "interview_type": 580,
  // Other relevant interview data...
}

Interview Settings Component

The UpdateInterviewSettings component allows you to modify the settings of an existing interview.

Props Overview

apiKey (string): Integration key for authenticating API requests, provided by the Babblebots team.
interviewId (string): The ID of the interview, required to update its settings.
interviewsettingsopen (boolean): Controls whether the Interview Settings dialog is initially open.
setInterviewSettingsOpen (function): Callback function to toggle the open/closed state of the Interview Settings dialog.

Example Usage

import React, { useState } from 'react'
import { UpdateInterviewSettings } from 'babblebots-react'
import 'babblebots-react/dist/index.css'

const App = () => {
  const [interviewSettingsOpen, setInterviewSettingsOpen] = useState(true)

  return (
    <InterviewSettings
      apiKey="your_api_key"
      interviewId="1324"
      interviewsettingsopen={interviewSettingsOpen}
      setInterviewSettingsOpen={setInterviewSettingsOpen}
    />
  )
}

export default App