4.1.27 • Published 11 months ago

@ombori/grid-conversation-assistant v4.1.27

Weekly downloads
-
License
ISC
Repository
-
Last release
11 months ago

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
    }}
  />
);
4.1.27

11 months ago

4.1.26

11 months ago

4.1.24

1 year ago

4.1.25

1 year ago

4.1.8

1 year ago

4.1.7

1 year ago

4.1.9

1 year ago

3.92.7

1 year ago

3.92.6

1 year ago

3.92.9

1 year ago

3.92.8

1 year ago

4.0.5

1 year ago

4.1.20

1 year ago

4.0.4

1 year ago

4.1.21

1 year ago

4.1.22

1 year ago

4.0.6

1 year ago

4.0.1

1 year ago

4.0.3

1 year ago

4.0.2

1 year ago

4.1.10

1 year ago

4.1.11

1 year ago

4.1.16

1 year ago

4.1.17

1 year ago

4.1.18

1 year ago

4.1.19

1 year ago

4.1.12

1 year ago

4.1.13

1 year ago

4.1.14

1 year ago

4.1.15

1 year ago

4.1.4

1 year ago

4.1.3

1 year ago

3.92.10

1 year ago

4.1.6

1 year ago

3.92.11

1 year ago

4.1.5

1 year ago

3.92.12

1 year ago

4.1.0

1 year ago

3.92.13

1 year ago

4.1.2

1 year ago

4.1.1

1 year ago

3.92.3

1 year ago

3.92.5

1 year ago

3.92.4

1 year ago

3.92.1

1 year ago

3.92.2

1 year ago

3.92.0

1 year ago

3.91.11

1 year ago

3.91.10

1 year ago

3.91.13

1 year ago

3.91.12

1 year ago

3.91.8

1 year ago

3.91.9

1 year ago

3.91.7

1 year ago

3.91.6

1 year ago

3.91.5

1 year ago

3.91.2

1 year ago

3.91.4

1 year ago

3.91.3

1 year ago

3.91.0

1 year ago

3.91.1

1 year ago

3.90.12

1 year ago

3.90.11

1 year ago

3.90.9

1 year ago

3.90.8

1 year ago

3.90.10

1 year ago

3.64.1

2 years ago

3.79.1

2 years ago

3.76.0

2 years ago

3.77.0

2 years ago

3.74.0

2 years ago

3.75.0

2 years ago

3.73.0

2 years ago

3.72.1

2 years ago

3.44.0

2 years ago

3.42.2

2 years ago

3.45.0

2 years ago

3.47.0

2 years ago

3.48.0

2 years ago

3.47.1

2 years ago

3.46.2

2 years ago

3.22.2

3 years ago

3.20.15

3 years ago

3.20.1

3 years ago

3.20.0

3 years ago

3.19.5

3 years ago

3.19.4

3 years ago

3.19.3

3 years ago

3.19.2

3 years ago

3.19.1

3 years ago

3.19.0

3 years ago

3.18.0

3 years ago