@ajari-dev/nisa-assistant v2.0.1

NISA Assistant

1. Installation

yarn add @ajari-dev/nisa-assistant

//or

npm install @ajari-dev/nisa-assistant

2. Getting Started

2.1 Features

1. Our NISA assistant provide an AI-based question and answer formed by a chat application.
2. User able to change language by preferenced user. Currently, NISA still provide en-US (english-US) and Bahasa Indonesia (id-ID). Further, NISA add more languages.
3. User able to choose either input from text or audio.
4. NISA provides a recommendation based on context.
5. NISA provides an NISA voice interpreter on each answer.

2.2 Ask for API_KEY

This package requires a API_KEY as credential key. You can ask or request via our developer for grant API_KEY.

2.2 Wrap with AssistantProvider

Add NISAAssistantProvider and wrap in your root component app. Put API_KEY in this provider's props.

import { AssistantProvider as NISAAsssistantProvider } from "@ajari-dev/nisa-assistant";

const AppLayout = () => {
    return(
        <NISAAsssistantProvider API_KEY="<YOUR_API_KEY>">
            //...your rest code
        </NISAAsssistantProvider>
    )
}

2.3 Add NISA CSS

Import NISA css for implementing style in all NISA components.

import "@ajari-dev/nisa-assistant/index.css";

//...your rest code

2.4 Apply AssistantApp Component

This component is main component, that handle floating button and its chat interface.

import { AssistantApp } from "@ajari-dev/nisa-assistant";

const App = () => {
    return(
        <div>
            <AssistantApp
                position="bottom-right"
            />
            //...rest code
        </div>
    )
}

3. API

3.1 AssistantApp

type AssistantAppProps = {
    position: "bottom-right" | "top-left" | "top-right" | "bottom-left";
    floatingButtonProps?: FloatingButtonProps;
    chatProps?: ChatAssistantProps;
}

3.1.1 FloatingButtonProps

type FloatingButtonProps = {
    customIcon?: React.ReactNode;
    defaultIconSize?: number;
    disabled: boolean;
    className?: string;
}

3.1.2 ChatAssistantProps

type ChatAssistantProps = {
    width: string;
    height: string;
    customBackground?: string;
    roundedSize?: "sm" | "md" | "lg";
    isBackdropBlur: boolean;
    isBorder: boolean;
    borderColor: string;
}