3.91.6 • Published 7 days ago
@ombori/grid-conversation-assistant v3.91.6
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} />
);
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
}}
/>
);
3.91.6
7 days ago
3.91.5
23 days ago
3.91.2
25 days ago
3.91.4
25 days ago
3.91.3
25 days ago
3.91.0
1 month ago
3.91.1
1 month ago
3.90.12
2 months ago
3.90.11
2 months ago
3.90.9
2 months ago
3.90.8
2 months ago
3.90.10
2 months ago
3.64.1
7 months ago
3.79.1
6 months ago
3.76.0
6 months ago
3.77.0
6 months ago
3.74.0
6 months ago
3.75.0
6 months ago
3.73.0
6 months ago
3.72.1
6 months ago
3.44.0
12 months ago
3.42.2
1 year ago
3.45.0
12 months ago
3.47.0
11 months ago
3.48.0
11 months ago
3.47.1
11 months ago
3.46.2
11 months ago
3.22.2
1 year ago
3.20.15
1 year ago
3.20.1
1 year ago
3.20.0
1 year ago
3.19.5
1 year ago
3.19.4
1 year ago
3.19.3
1 year ago
3.19.2
1 year ago
3.19.1
1 year ago
3.19.0
1 year ago
3.18.0
1 year ago