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;
}

| Props | Description | Default | Type | | -------- | -------- | -------- | -------- | | position | position of floating button | 'bottom-right' | 'bottom-left' | 'bottom-right' | 'top-right' | 'top-left' | | floatingButtonProps | Props for customize floating button styling | undefined | FloatingButtonProps | | chatProps | Props for customize chat interface styling | undefined | ChatProps |

3.1.1 FloatingButtonProps

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

| Props | Description | Default |Type | | -------- | -------- | -------- | ------- | | customIcon | for customize floating button icon (override default Icon) | undefined | ReactNode | | defaultIconSize | for customize floating button icon (override default Icon) | 100 | number | | disabled | disable floating button | false | boolean | | className | className for floating button | undefined | string |

3.1.2 ChatAssistantProps

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

| Props | Description | Default | Type | Example | | -------- | -------- | -------- | -------- |-------- | | width | Width size of chat interface. Default value is undefined, because relative full of its parent. | undefined | string of CSS | 100px or 80% | | height | Height size of chat interface. Default value is undefined, because relative full of its parent. | undefined | string of CSS | 100px or 80% | | customBackground | custom background of chat interface, it either color or gradient background. | undefined | string of TailwindCSS | bg-blue-100 or bg-black/10 | | roundedSize | border radius of chat interface | undefined | sm | md | lg | sm | | isBackdropBlur | Backdrop blur of chat interface | false | boolean | false | | isBorder | show border of chat interface | false | boolean | false | | borderColor | border color of chat interface | <empty_string> | string | <empty_string> |