Grid Conversation Assistant

Assist end-users with guided conversation using a coversation tree in a simple chatbox

Installation

npm i @ombori/grid-conversation-assistant

or

yarn add @ombori/grid-conversation-assistant

Basic Usage

• Wrap your component with the provider

import { StateMachineProvider } from '@ombori/grid-conversation-assistant';

...

return (
  <StateMachineProvider>
    <App />
  </StateMachineProvider>
);

• Load the chat box anywhere you like

import { ChatBoxAssistant } from '@ombori/grid-conversation-assistant';

...

const url = 'https://media.omborigrid.com/media/5fa9185661e2a7e910f2e55b/sample-conversation-tree.json';

return (
  <ChatBoxAssistant conversationTreeUrl={url} />
);

Sample Conversation Tree File

Advanced Usage

• Override styling

import { ChatBoxAssistant, ChatBoxHeader, StateMachineCurrentState } from '@ombori/grid-conversation-assistant';
import styled from '@emotion/styled';

const ChatBoxAssistantStyled = styled(ChatBoxAssistant)`
  width: 500px;
  
  .chat-bubble-option,
  .btn-close {
    border-radius: ${({ theme }) => getBorderRadius(theme.buttonsBorderType)};
    background-color: ${({ theme }) => theme.colors.primary};
  }
  .chat-question {
    border-radius: 0;
    box-shadow: unset;
    background-color: unset;
    padding: 0;
    border: 0;
  }
  .chat-response {
    border-radius: ${({ theme }) => getBorderRadius(theme.buttonsBorderType)};
    margin-bottom: 45px;
  }
  .btn-reset {
    border-radius: ${({ theme }) => getBorderRadius(theme.buttonsBorderType)};
  }
`;

• Change default header, labels
• Capture user interaction and decide how to handle them in your app

...

const url = 'https://media.omborigrid.com/media/5fa9185661e2a7e910f2e55b/sample-conversation-tree.json';

return (
  <ChatBoxAssistantStyled
    conversationTreeUrl={url}
    header={
      <ChatBoxHeader
        title="My Product Guide"
        subtext="Choose an option that fits your needs"
      />
    }
    resetButtonText="Start Again"
    closeButtonText="Close Guide"
    onChange={(current: StateMachineCurrentState) => {
      // This is where you decide what to do with user interaction
      // e.g. when user selects options in the assisted conversation
    }}
  />
);