@fireraven-ai/secure-chatbot NPM

Fireraven Secure Chatbot

What is it?

The Fireraven Secure Chatbot is the component which enables to seemlessly interact with the Fireraven Guardrails, making interactions with your Chatbot behave in a predictable manner.

How to use

The component library is only available as an ESM bundled component exposing a single component, the FireravenSecureChatbot. This component uses React which needs to be available in the browser.

As a React Component

In order to import the Fireraven Secure ChatBot in a React project, it must first be added to the project's package.json file.

# Using yarn
yarn add @fireraven-ai/secure-chatbot

# Using npm
npm install @fireraven-ai/secure-chatbot

The module can then be imported in any page as follows. The component has a fixed positioning, making it's placement only relevant as it will be rendered at the same time as the component importing it. The styles must be imported seperatly from the component.

import { FireravenSecureChatbot } from "@fireraven-ai/secure-chatbot";
import '@fireraven-ai/secure-chatbot/dist/style.css'

And use the component while providing the correct props. The component is built using typescript, so typing is available out-of-the-box. The only mandatory prop is the clientID, without which the component can't operate.

<FireravenSecureChatbot
  clientId: string // The clientID associated with the Chatbot used to answer messages
  conversationURL?: string // The API endpoint used to create a conversation. Defaults to the fireraven.ai api
  messageURL?: string // The API endpoint used to save a message. Defaults to the fireraven.ai api
  answerURL?: string // The API endpoint used to answer a message. Defaults to the fireraven.ai api
  title?: string; // The title which would be displayed on the top bar
  welcomeMessage?: string // The welcome message which should be displayed when opening the Chatbot. This text can be styled as markdown. 
  tooltipMessage?: string // The tooltip show left of the ChatBot start button
  image?: string // The image shown on the ChatBot start button
/>

Note

The component accesses the browser's document object, making it impossible to use in a SSR environment like NextJS. The component needs to be loaded only on the client-side by using dynamic import or another method of you choosing. Here is an example in NextJS. This is only required if the component where the Chatbot is imported is a server rendered component.

const FireravenSecureChatbot = dynamic(
  async () => {
    const { FireravenSecureChatbot } = await import(
      "@fireraven-ai/secure-chatbot"
    );
    return FireravenSecureChatbot;
  },
  { ssr: false }
);

export default function Index() {
  return (
    <FireravenSecureChatbot
      // Insert needed props
    />
  );
}

Direct in HTML file usage

In order the use the Fireraven Secure ChatBot directly in an HTML file, you must use the following structure including the stylesheet which is imported at the top. This is an ES Module and should work in every modern browsers.

<head>
  <!-- Include the stylesheet -->
  <link rel="stylesheet" href="https://unpkg.com/@fireraven-ai/secure-chatbot/dist/style.css" />

  <!-- Import the dependencies which can be simply imported from CDNs -->
  <script type="importmap">
    {
      "imports": {
        "react": "https://esm.sh/react",
        "react/jsx-runtime": "https://esm.sh/react/jsx-runtime",
        "react-dom": "https://esm.sh/react-dom",
        "@fireraven-ai/secure-chatbot": "https://unpkg.com/@fireraven-ai/secure-chatbot"
      }
    }
  </script>
  <!-- Import and setup the component -->
  <script type="module">
    import React from "react";
    import ReactDOM from "react-dom";
    import { FireravenSecureChatbot } from "@fireraven-ai/secure-chatbot";

    // Create the component and configure the parameters
    const client = React.createElement(FireravenSecureChatbot);
    client.props = {
      clientId: "<The ClientID of your Chatbot>",
      // Other props as specified in the React Component mentionned above
    };

    // Place the component in the page
    ReactDOM.render(client, document.getElementById("root"));
  </script>
</head>

<body>
  <!-- Include a div with an id where the component will be placed -->
  <div id="root"></div>
</body>

Dependencies

The library is dependant on React. You have to provide you own version for this component to work.

@headlessui/react @phosphor-icons/react @tanstack/react-query markdown-to-jsx

0.1.0

9 months ago