🤖 React Conversational UI

A react component for conversational UI. Define your question and get the users input in return.

How to use

Define the questions

The questions supports these field.

• text - the text for your question (string) (required)
• image - url to a image (string)
• buttons - if you want to have answer alternatives (array)
• key - the key that will be returned with the questions. If not key defined the question will not be returned.

The React component

The component take these props:

• questions - an array of questions.
• onEnded - function to return the user input when session ends.
• theme - styles and settings (optional)

import Conversation from '../containers/Conversation';

const App = (props) => {
  function getUserAnswers(answers) {
    console.log('answers', answers);
  }

  return (
    <div>
      <Conversation
        questions={questions}
        onEnded={getUserAnswers}
        theme={theme}
      />
    </div>
  );
}

💅 Themeing

You can customize the size, colors, fonts and avatars.

const theme = {
  blobColor: 'cyan',
  userBlobColor: 'deeppink',
  user: '👀',
  bot: '😾',
  baseColor: '#ccc',
  font: "'courier', monotype",
  height: '500px',
  width: '500px',
};

Example questions

Questions:

const questions = [{
    text: 'Hello!',
  }, {
    text: 'What is your first name?',
    key: 'firstName',
  }, {
    text: 'How are you?',
    key: 'emotion',
    buttons: [{
      text: 'Awesome!',
      value: 'great',
    }, {
      text: 'Good',
      value: 'good',
    }, {
      text: 'Could be better',
      value: 'medium',
    }, {
      text: 'Not so good...',
      value: 'bad',
    }]
  }, {
    text: 'Do you like this image?',
    key: 'imageLike',
    image: 'https://unsplash.it/400/300/?random',
    buttons: [{
      text: 'Yes, looks great!',
      value: 'yes',
    }, {
      text: 'No really...',
      value: 'no',
    }]
}];

📦 Dependencies

• Create React App <3
• Styled Components
• Flexbox