@nlxai/chat-react NPM

React hook wrapper for the NLX Chat SDK

This package provides the useChat custom hook, making it effortless to create fully custom chat widgets for web and mobile.

Installation

npm install --save @nlxai/chat-react react react-dom

Usage

import React from "react";
import { useChat } from "@nlxai/chat-react";

const ChatWidget = () => {
  const chat = useChat({
    botUrl: "", // obtain from NLX deployments page
    headers: {
      "nlx-api-key": "", // obtain from NLX deployments page
    },
    userId: "abcd-1234", // optional property to identify the user
    conversationId: "", // start with a specific conversation ID - useful if you want to resume a previous conversation
    context: {}, // context that is shared with the bot
    languageCode: "es-US", // optional language code for standard bots that do not run on US English
  });

  return (
    <div>
      {chat.responses.map(/* render messages in the current conversation */)}
      <input
        value={chat.inputValue}
        onChange={(event) => {
          chat.setInputValue(event.target.value);
        }}
      />
      <button
        onClick={() => {
          chat.conversationHandler.sendText(chat.inputValue);
        }}
      >
        Send
      </button>
    </div>
  );
};

See the standalone chat widget implemention for a production-grade example.

API

The useChat hook returns an object containing the following fields:

`conversationHandler`

Contains the full conversation handler object from the the @nlxai/chat-core package. This is mostly used for the send* methods like sendText or sendStructured, as the response subscription is handled by the hook automatically.

`inputValue` and `setInputValue`

Hold and modify the value of the chat input field, which is auto-cleared whenever a message is sent. Using this field is optional and you can hold input state separately.

`responses`

The reactive full history of the chat messages. It contains the type: "user" | "bot" field and an associated payload. Please refer to the type definitions fora complete structure.

`waiting`

A reactive value that is true whenever a response from the bot is in progress, used to render a message bubble with loading dots.

`messagesContainerRef` (DOM only)

A ref object you can attach to the container of the messages. The browser will automatically scroll to the bottom of this container whenever new messages arrive.