Babblebots utility react components
npm install babblebots-react> Utility React components for Babblebots integration
 
Install the package via npm:
``bash`
npm install babblebots-react --save
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
`tsx
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 (
alignItems='center'
justifyContent='center'
>
jdUrl="https://example.com/job-description"
jd="
jdText="Job Description Details"
onPublish={(data) => {
console.log('Interview Data:', data)
setInterviewId(data.interview_type)
}}
isOpen={isOpen}
setisOpen={setIsOpen}
interviewid={interviewId}
subcompanyid="1234"
/>
)
}
export default App
`
#### Example Data Returned by onPublish Callback
`json`
{
"role_name": "Technical Lead - Fullstack .NET",
"interview_type": 580,
// Other relevant interview data...
}
---
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
`tsx
import React, { useState } from 'react'
import { UpdateInterviewSettings } from 'babblebots-react'
import 'babblebots-react/dist/index.css'
const App = () => {
const [interviewSettingsOpen, setInterviewSettingsOpen] = useState(true)
return (
interviewId="1324"
interviewsettingsopen={interviewSettingsOpen}
setInterviewSettingsOpen={setInterviewSettingsOpen}
/>
)
}
export default App
``
This project is licensed under the MIT License.