@sapia-ai/chatbot 2.31.0

package/README.md

@@ -0,0 +1,366 @@
+## Information
+PredictiveHire AI chatbot.
+You can contact PredictiveHire for more information. https://www.predictivehire.com
+
+<br />
+
+## Usage
+0. [Preparation](#jump0)
+1. [use React](#jump1)
+2. [use Vue(SPA mode)](#jump2)
+3. [use Vue(SSR mode)](#jump3)
+
+<br />
+
+### <span id="jump0">0. prepare</span>
+In order to initiate the request correctly when developing locally, you need to add the host of **app.localhost.com**
+
+> Note: 
+If you use vue-cli to create a new project, you might meet a `Invalid Host/Origin header` error when you open the page with app.localhost.com. This is because the new version of webpack-dev-server adds security verification. The hostname is checked by default. If the hostname is not in the configuration, the access will be interrupted.
+
+> Solution:
+Create the file vue.config.js in the <font color=#FF000 >**root directory**</font>, and then fill in the following content:
+```
+module.exports = {
+  devServer: {
+    disableHostCheck: true,
+  }
+}
+```
+
+<br />
+
+### <span id="jump1">1. use React</span>
+create TestPage component
+
+|-- TestPage
+
+|---- TestPage.tsx
+
+|---- style.css
+```
+// ----------------------------------- TestPage.tsx ----------------------------
+import "./style.css"
+
+import * as React from "react"
+import { PHChatBot } from "@sapia-ai/chatbot"
+
+export const TestPage = () => {
+  // for assessmentId you can contact PredictiveHire for more information, so do appId and region
+  const appId = "appId"
+  const assessmentId = "assessmentId"
+  const region = "region" // need to confirm with PredictiveHire
+  const env = "qa" // this one is used to decide which domain name to use to initiate an api request
+
+  const chatbotATS = new PHChatBot({
+    appId: appId,
+    region: region,
+    env: env,
+    assessmentId: assessmentId
+  })
+
+  // developers can add the event callback they want
+  chatbotATS.addCallbackHandler({
+    FI_ASSESSMENT_STARTED: payload => {
+      console.info(payload)
+    },
+    FI_ASSESSMENT_ANSWER_SAVED: payload => {
+      console.info(payload)
+    },
+    FI_ASSESSMENT_ENDED: assessmentId => {
+      console.info(assessmentId)
+    }
+  })
+  chatbotATS.setTheme({
+    theme: {
+      question: {
+        backgroundColor: "#ef8200",
+        fontColor: "#fff"
+      }
+    }
+  })
+  chatbotATS.attachTo({ selector: "#rootATS" })
+
+  return (
+    <div className="main">
+      <div className="chat-bot-box" id="rootATS" />
+    </div>
+  )
+}
+
+//-------------------------------------- style.css ----------------------------
+.main {
+  position: relative;
+  text-align: center;
+  width: 500px;
+  height: 90vh;
+  margin: 5vh auto;
+  background-color: #fff;
+}
+
+.chat-bot-box {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  background-color: #fff;
+}
+
+@media screen and (max-width: 980px) {
+  .chat-bot-box {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    transform: none;
+  }
+}
+
+```
+
+<br />
+
+### <span id="jump2">2. use Vue(SPA mode)</span>
+```
+<template>
+  <div class="main">
+    <div class="chat-bot-box" id="rootATS" />
+  </div>
+</template>
+
+<script>
+import {PHChatBot} from "@sapia-ai/chatbot"
+export default {
+  name: 'HelloWorld',
+  mounted: () => {
+    // for assessmentId you can contact PredictiveHire for more information, so do appId and region
+    const appId = "appId"
+    const assessmentId = "assessmentId"
+    const region = "region" // need to confirm with PredictiveHire
+    const env = "qa" // this one is used to decide which domain name to use to initiate an api request
+
+    const chatbotATS = new PHChatBot({
+      appId: appId,
+      region: region, // need to confirm with PredictiveHire
+      env: env, // this one is used to decide which domain name to use to initiate an api request
+      assessmentId: assessmentId
+    })
+
+    // developers can add the event callback they want
+    chatbotATS.addCallbackHandler({
+      FI_ASSESSMENT_STARTED: payload => {
+        console.info(payload)
+      },
+      FI_ASSESSMENT_ANSWER_SAVED: payload => {
+        console.info(payload)
+      },
+      FI_ASSESSMENT_ENDED: assessmentId => {
+        console.info(assessmentId)
+      }
+    })
+    chatbotATS.setTheme({
+      theme: {
+        question: {
+          backgroundColor: "#ef8200",
+          fontColor: "#fff"
+        }
+      }
+    })
+    chatbotATS.attachTo({ selector: "#rootATS" })
+  }
+}
+</script>
+
+<style scoped>
+.main {
+  position: relative;
+  text-align: center;
+  width: 500px;
+  height: 90vh;
+  margin: 5vh auto;
+  background-color: #fff;
+}
+
+.chat-bot-box {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  background-color: #fff;
+}
+
+@media screen and (max-width: 980px) {
+  .chat-bot-box {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    transform: none;
+  }
+}
+</style>
+```
+
+<br />
+
+### <span id="jump3">3. use Vue(SSR mode)</span>
+```
+<template>
+  <div class="main">
+    <div class="chat-bot-box" id="rootATS" />
+  </div>
+</template>
+
+<script>
+let PHChatBot
+if (typeof window !== 'undefined') {
+  // Ensure that the window object has been defined. Otherwise you will encounter window is not defined error
+  PHChatBot = require('@sapia-ai/chatbot')
+}
+export default {
+  name: 'HelloWorld',
+  mounted: () => {
+    // for assessmentId you can contact PredictiveHire for more information, so do appId and region
+    const appId = "appId"
+    const assessmentId = "assessmentId"
+    const region = "region" // need to confirm with PredictiveHire
+    const env = "qa" // this one is used to decide which domain name to use to initiate an api request
+
+    const chatbotATS = new PHChatBot.PHChatBot({
+      appId: appId,
+      region: region, // need to confirm with PredictiveHire
+      env: env, // this one is used to decide which domain name to use to initiate an api request
+      assessmentId: assessmentId
+    })
+
+    // developers can add the event callback they want
+    chatbotATS.addCallbackHandler({
+      FI_ASSESSMENT_STARTED: payload => {
+        console.info(payload)
+      },
+      FI_ASSESSMENT_ANSWER_SAVED: payload => {
+        console.info(payload)
+      },
+      FI_ASSESSMENT_ENDED: assessmentId => {
+        console.info(assessmentId)
+      }
+    })
+    chatbotATS.setTheme({
+      theme: {
+        question: {
+          backgroundColor: "#ef8200",
+          fontColor: "#fff"
+        }
+      }
+    })
+    chatbotATS.attachTo({ selector: "#rootATS" })
+  }
+}
+</script>
+
+<style scoped>
+.main {
+  position: relative;
+  text-align: center;
+  width: 500px;
+  height: 90vh;
+  margin: 5vh auto;
+  background-color: #fff;
+}
+
+.chat-bot-box {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  background-color: #fff;
+}
+
+@media screen and (max-width: 980px) {
+  .chat-bot-box {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    transform: none;
+  }
+}
+</style>
+```
+
+<br /><br />
+
+## Params
+|   param     |    desc   |
+|  ----  | ----  |
+| env  | enum(local, qa, sandbox, product) For third-party developers, `qa` or `sandbox` will be good for development, and use `product` for online environments, different value of env will be call the apis with different domain |
+| appId  | string, used to retrieve cross-domain whitelist. Pls contact PredictiveHire for more information(https://www.predictivehire.com/) |
+| region  | string, PredictiveHire will provide API endpoint with different regions for different customers. Pls contact PredictiveHire for more information(https://www.predictivehire.com/) |
+| assessmentId  | This one is generate by PredictiveHire. Pls contact PredictiveHire for more information(https://www.predictivehire.com/)  |
+
+<br /><br />
+
+## API
+|    API    |   definition     |   desc     |
+|  ----  |  ----  |  ----  |
+| attachTo  | `({ selector, index }: { selector: string; index?: number; }) => void` | This `selector` must be a valid CSS selector string. the default value of `index` is 0, which means when multiple qualified doms are matched, the `index` element in the domList should be selected  |
+| addCallbackHandler  | `(callbacks: PHChatBotCallback): => void` | Developers can add the event callback they want. The callBack functions will be called in corresponding stage. You can check the `PHChatBotCallback` below  |
+| setTheme  | `({ theme }: { theme: Theme; }) => void` | You can use this api to customized theme color, the complete data structure is as follows  |
+
+<br /><br />
+
+## Params Type
+### Theme
+```
+{
+  hint: {
+    backgroundColor: string
+    fontColor: string
+  },
+  question: {
+    backgroundColor: string
+    fontColor: string
+  },
+  response: {
+    backgroundColor: string
+    fontColor: string
+  },
+  listItem: {
+    backgroundColor: string
+    fontColor: string
+  },
+  selectedItem: {
+    backgroundColor: string
+    fontColor: string
+  },
+  button: {
+    backgroundColor: string
+    fontColor: string
+  }
+}
+```
+<br/>
+
+### PHChatBotCallback
+```
+{
+  FI_ASSESSMENT_STARTED: (payload: {
+    assessmentId
+    chatLogs
+    branding
+  }) => void;
+  FI_ASSESSMENT_ANSWER_SAVED: (payload: {
+    assessmentId: string
+    question: string
+    answer: string
+    types: string[]
+  }) => void;
+  FI_ASSESSMENT_ENDED: (payload: { assessmentId: string }) => void;
+}
+```

package/RootApp.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function RootApp(): JSX.Element;

package/apis/FIApis.d.ts

@@ -0,0 +1,152 @@
+import { AxiosInstance } from "axios";
+import { PostExtractHumanNameExtractType } from "@/apis/types/apiRequest";
+import { FiToken } from "@/types/Api";
+import { PHChatBotCallback } from "@/types/ChatBot";
+import { AgentResponse, AssessmentStatus, CandidateResponse, CandidateResponseInput, EditCandidateResponseInput } from "@/types/Next";
+import { GetApplicationJobRequisitionApiResponse, GetJobRequisitionApiResponse, PostExtractHumanNameApiResponse } from "./types/apiResponse";
+import { Branding } from "./types/branding";
+export declare let axiosInstance: AxiosInstance;
+export declare const postOrderAssessment: ({ orderAssessmentBody, agentType, region }: {
+    orderAssessmentBody: unknown;
+    agentType?: string;
+    region: string;
+}) => Promise<import("axios").AxiosResponse<{
+    assessmentId: string;
+}, any>>;
+export declare const postOrderGenericAssessment: ({ cohortId }: {
+    cohortId: string;
+}) => Promise<import("axios").AxiosResponse<{
+    assessmentLink: string;
+}, any>>;
+export declare const postOrderJobRequisitionAssessment: ({ customerId, hierarchyId, organizationId, jobRequisitionShortcode, workflowId }: {
+    customerId: string;
+    hierarchyId: string;
+    organizationId: string;
+    jobRequisitionShortcode: string;
+    workflowId: string;
+}) => Promise<import("axios").AxiosResponse<{
+    assessmentLink: string;
+}, any>>;
+export declare const postOrderApplicationAssessment: ({ customerId, hierarchyId, organizationId, applicationShortcode, workflowId }: {
+    customerId: string;
+    hierarchyId: string;
+    organizationId: string;
+    applicationShortcode: string;
+    workflowId: string;
+}) => Promise<import("axios").AxiosResponse<{
+    assessmentId: string;
+    assessment: {
+        assessmentLink: string;
+    };
+}, any>>;
+export declare const postAtsStartAssessment: ({ assessmentId }: {
+    assessmentId: string;
+}) => Promise<import("axios").AxiosResponse<{
+    assessmentId: string;
+    chatLogs: (CandidateResponse | AgentResponse)[];
+    branding?: Branding;
+    hasVideoQuestion?: boolean;
+    assessmentStatus: AssessmentStatus;
+    isCohortClosed?: boolean;
+    cohortIsArchivedMessage?: AgentResponse;
+    numOfNormalQuestion: number;
+    numOfNormalAnswer: number;
+    fiToken: FiToken;
+    language: string;
+    agcDetectionAttempt: number;
+    allowNextAgcDetection: boolean;
+    isTermsAndConditionsAccepted: boolean;
+    candidateCountryCode?: string;
+    assessmentIsReusedMessage?: AgentResponse;
+}, any>>;
+export declare const postNext: ({ assessmentId, candidateResponse, fiToken }: {
+    assessmentId: string;
+    candidateResponse?: CandidateResponseInput;
+    fiToken: FiToken;
+}) => Promise<import("axios").AxiosResponse<{
+    nextResponse: AgentResponse;
+    candidateResponse?: CandidateResponse;
+    assessmentStatus: AssessmentStatus;
+    duplicatedWithAssessmentLink?: string;
+    cohortIsArchivedMessage?: AgentResponse;
+    assessmentIsReusedMessage?: AgentResponse;
+    numOfNormalAnswer: number;
+    isTermsAndConditionsAccepted: boolean;
+    fiToken?: FiToken;
+}, any>>;
+export declare const postEditAnswer: ({ assessmentId, editCandidateResponse, fiToken }: {
+    assessmentId: string;
+    editCandidateResponse: EditCandidateResponseInput;
+    fiToken: FiToken;
+}) => Promise<import("axios").AxiosResponse<{
+    updatedCandidateResponse: CandidateResponse;
+    cohortIsArchivedMessage?: AgentResponse;
+}, any>>;
+export declare const getUploadVideoUrl: ({ assessmentId, questionId, extension }: {
+    assessmentId: string;
+    questionId: string;
+    extension: string;
+}) => Promise<import("axios").AxiosResponse<{
+    url: string;
+    videoFileName: string;
+}, any>>;
+export declare const postUploadVideo: ({ data, url, extension, handleUploadProgress }: {
+    data: File;
+    url: string;
+    extension: string;
+    handleUploadProgress: (uploadInfo: any) => void;
+}) => Promise<void>;
+export declare const getVideoAccessUrl: ({ assessmentId, questionId, extension }: {
+    assessmentId: string;
+    questionId: string;
+    extension: string;
+}) => Promise<import("axios").AxiosResponse<{
+    url: string;
+    videoFileName: string;
+}, any>>;
+/**
+ * Fetch translation file from backend API
+ */
+export declare const getFITranslation: ({ language, phChatBotCallback }: {
+    language: string;
+    phChatBotCallback: PHChatBotCallback;
+}) => Promise<{
+    [key: string]: string;
+}>;
+export declare const postDetectAgc: ({ assessmentId, fiToken }: {
+    assessmentId: string;
+    fiToken: FiToken;
+}) => Promise<import("axios").AxiosResponse<{
+    attempt: number;
+    isAgc: boolean;
+    allowNextAgcDetection: boolean;
+}, any>>;
+export declare const getAccessManagement: ({ assessmentId }: {
+    assessmentId: string;
+}) => Promise<import("axios").AxiosResponse<{
+    shouldAuthenticate: boolean;
+    emailHint: string;
+    language: string;
+}, any>>;
+export declare const getJobRequisition: ({ shortcode }: {
+    shortcode: string;
+}) => Promise<import("axios").AxiosResponse<GetJobRequisitionApiResponse, any>>;
+export declare const getApplicationJobRequisition: ({ applicationShortcode, trackCode, accessType }: {
+    applicationShortcode: string;
+    trackCode: string | null;
+    accessType: string | null;
+}) => Promise<import("axios").AxiosResponse<GetApplicationJobRequisitionApiResponse, any>>;
+export declare const postVerifyAccess: ({ assessmentId, candidateEmail }: {
+    assessmentId: string;
+    candidateEmail: string;
+}) => Promise<import("axios").AxiosResponse<{
+    allowToAccess: boolean;
+}, any>>;
+export declare const postWorkflowConfiguration: (workflowId: string, language: string) => Promise<import("axios").AxiosResponse<{
+    assessmentUrl: string;
+}, any>>;
+export declare const postExtractHumanName: ({ assessmentId, userText, extractType }: {
+    assessmentId: string;
+    userText: string;
+    extractType: PostExtractHumanNameExtractType;
+}) => Promise<import("axios").AxiosResponse<PostExtractHumanNameApiResponse, any>>;

package/apis/hooks/useGetApplicationJobRequisition.d.ts

@@ -0,0 +1,12 @@
+import { PHChatBotCallback } from "@/types/ChatBot";
+export declare const useApplicationGetJobRequisition: ({ phChatBotCallback }: {
+    phChatBotCallback: PHChatBotCallback;
+}) => {
+    gettingApplicationJobRequisition: boolean;
+    getApplicationJobRequisition: (args_0: {
+        applicationShortcode: string;
+        trackCode: string;
+        accessType: string;
+    }) => Promise<import("../types/apiResponse").GetApplicationJobRequisitionApiResponse>;
+    getApplicationJobRequisitionError: Error;
+};

package/apis/hooks/useGetJobRequisition.d.ts

@@ -0,0 +1,10 @@
+import { PHChatBotCallback } from "@/types/ChatBot";
+export declare const useGetJobRequisition: ({ phChatBotCallback }: {
+    phChatBotCallback: PHChatBotCallback;
+}) => {
+    gettingJobRequisition: boolean;
+    getJobRequisition: (args_0: {
+        jobRequisitionShortcode: string;
+    }) => Promise<import("../types/apiResponse").GetJobRequisitionApiResponse>;
+    getJobRequisitionError: Error;
+};

package/apis/types/apiRequest.d.ts

@@ -0,0 +1 @@
+export declare type PostExtractHumanNameExtractType = "firstName" | "lastName" | "fullName";

package/apis/types/apiResponse.d.ts

@@ -0,0 +1,16 @@
+import { Branding } from "./branding";
+import { JobRequisition } from "./jobRequisition";
+export declare type GetJobRequisitionApiResponse = {
+    jobRequisition: JobRequisition;
+    branding: Branding;
+};
+export declare type GetApplicationJobRequisitionApiResponse = {
+    currentAssessmentLink: string | null;
+    jobRequisition: JobRequisition | null;
+    branding: Branding | null;
+};
+export declare type PostExtractHumanNameApiResponse = {
+    firstName?: string;
+    lastName?: string;
+    fullName?: string;
+};

package/apis/types/branding.d.ts

@@ -0,0 +1,17 @@
+export declare type ThemeElement = {
+    backgroundColor?: string;
+    fontColor?: string;
+    linkColor?: string;
+};
+export declare type ThemeProperty = {
+    name: string;
+    type: string;
+    value: ThemeElement;
+};
+export declare type Branding = {
+    customerId: string;
+    title?: string;
+    theme?: ThemeProperty[];
+    logoUrl?: string;
+    font?: string;
+};

package/apis/types/jobRequisition.d.ts

@@ -0,0 +1,20 @@
+import { SupportedLanguage } from "@/utils/translation/translation";
+export declare type WorkflowOption = {
+    workflowId: string;
+    language: SupportedLanguage;
+    isDefault: boolean;
+    displayName: string;
+};
+export declare type WorkflowSet = {
+    _id: string;
+    name: string;
+    workflowOptions: WorkflowOption[];
+    createdAt: string;
+};
+export declare type JobRequisition = {
+    customerId: string;
+    hierarchyId: string;
+    organizationId: string;
+    title: string;
+    workflowSet: WorkflowSet;
+};

package/commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ["@commitlint/config-conventional"] }

package/components/AccessVerificationForm/__tests__/AccessVerificationForm.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/AccessVerificationForm/index.d.ts

@@ -0,0 +1 @@
+export * from "./view";

package/components/AccessVerificationForm/view.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Translation } from "@/utils/translation/translation";
+export declare const AccessVerificationForm: ({ emailHint, loading, errorMessage, candidateEmail, trans, onConfirmBtnClick, onEmailInputChange }: {
+    emailHint: string;
+    loading: boolean;
+    errorMessage: string;
+    candidateEmail: string;
+    trans: Translation;
+    onConfirmBtnClick: (candidateEmail: string) => void;
+    onEmailInputChange: (candidateEmail: string) => void;
+}) => JSX.Element;

package/components/AgcWarningModal/__tests__/AGCWarningModal.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/AgcWarningModal/index.d.ts

@@ -0,0 +1 @@
+export * from "./view";

package/components/AgcWarningModal/view.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const AgcWarningModal: ({ shouldShowAgcWarningModal, attempt, handleAgcWarningEditBtnClick, handleAgcWarningContinueBtnClick }: {
+    shouldShowAgcWarningModal: boolean;
+    attempt: number;
+    handleAgcWarningEditBtnClick: () => void;
+    handleAgcWarningContinueBtnClick: () => void;
+}) => JSX.Element;

package/components/AssessmentProgressBar/__tests__/AssessmentProgressBar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/AssessmentProgressBar/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { AssessmentProgressBar } from "./view";
+export { AssessmentProgressBar };
+declare const _default: {
+    AssessmentProgressBar: () => JSX.Element;
+};
+export default _default;

package/components/AssessmentProgressBar/view.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AssessmentProgressBar: () => JSX.Element;

package/components/AutoScrollText/__tests__/AutoScrollText.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/AutoScrollText/__tests__/useAutoScrollText.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/AutoScrollText/useAutoScrollText.d.ts

@@ -0,0 +1,7 @@
+import { MutableRefObject } from "react";
+export declare const useAutoScrollText: (wrapperRef: MutableRefObject<HTMLDivElement>, scrollTextRef: MutableRefObject<HTMLSpanElement>, scrollSpeedPerPixel?: number) => {
+    animationDuration: string;
+    horizontalTranslation: number;
+    shouldScroll: boolean;
+    scrollPaused: boolean;
+};

package/components/AutoScrollText/view.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const AutoScrollText: ({ children }: {
+    children: string;
+}) => JSX.Element;

package/components/ButtonGroup/index.d.ts

@@ -0,0 +1 @@
+export * from "./view";