react-native-dialogflow-messenger

React Native Dialogflow CX Messenger

Introduction

This library implements the Dialogflow Messenger custom payload protocol, you just need enable the DialogFlow Messenger integration and use this library with you Agent ID and Location

Demo

Installation

Add the dependency:

yarn add react-native-dialogflow-messenger
yarn add react-native-vector-icons
react-native link react-native-vector-icons

Peer Dependencies

IMPORTANT! You need install them

"react": ">= 17.x.x",
"react-native": ">= 0.64.x",

Usage

Import

import { DialogFlowMessenger } from "react-native-dialogflow-messenger";

Component Usage

<DialogFlowMessenger
  location="<agent_id>"
  agent="<agent_id>"      
  //Style
  dfMessengerBotMessage="#878fac"
  dfMessengerUserMessage="#479b3d"
  dfMessengerFontColor="#FFFFFF"
  //UI Events 
  dfAccordionClicked={(event)=>console.log("Accordion",event)}
  dfButtonClicked={(event)=>console.log("Button",event)}
  dfChipClicked={(event)=>console.log("Chip",event)}
  dfInfoCardClicked={(event)=>console.log("Info",event)}
  dfListElementClicked={(event)=>console.log("list",event)}
  //Dialogflow Events
  dfMessengerError={(event)=>console.log("Error",event)}
  dfRequestSent={(event)=>console.log("Send",event)}
  dfResponseReceived={(event)=>console.log("Response",event)}
  dfUserInputEntered={(event)=>console.log("UserInput",event)}
    />

Configuration - Props

Property	Type	Default	Description
location	string		make the button outline
agent	string		make the button with a solid background and a shadow
dfMessengerBotMessage	color	#fefefe	make the button with a gradient background and a shadow
dfMessengerUserMessage	color	#dcdcdc	change the button's width
dfMessengerFontColor	color	#FFFFFF	change the button's width
dfAccordionClicked	func		change the button's width
dfButtonClicked	func		change the button's width
dfChipClicked	func		change the button's width
dfInfoCardClicked	func		make the button with a gradient background and a shadow
dfListElementClicked	func		make the button with a gradient background and a shadow
dfMessengerError	func		make the button with a gradient background and a shadow
dfRequestSent	func		make the button with a gradient background and a shadow
dfResponseReceived	func		make the button with a gradient background and a shadow
dfUserInputEntered	func		make the button with a gradient background and a shadow

Dialogflow Messenger Protocol

Properties

• [X] df-messenger-bot-message Bubble background color for agent messages.
• [ ] df-messenger-button-titlebar-color Color for the floating button and the titlebar of the chat dialog.
• [ ] df-messenger-button-titlebar-font-color Font color for the title in the titlebar.
• [ ] df-messenger-chat-background-color Color for the chat dialog background.
• [X] df-messenger-font-color Font color for messages.
• [ ] df-messenger-input-box-color Background color for the text input box.
• [ ] df-messenger-input-font-color Font color for the text input box.
• [ ] df-messenger-input-placeholder-font-color Font color for placeholder text in text input box.
• [ ] df-messenger-minimized-chat-close-icon-color Color of the close icon in the closed chat view.
• [ ] df-messenger-send-icon Color of the send icon in the text input box.
• [X] df-messenger-user-message Bubble background color for user messages.

Features

• [X] Info
• [X] Chips
• [X] Description
• [X] Image
• [X] Button
• [X] Lists
• [X] Accordion
• [X] Combining response types

Events

• [X] df-accordion-clicked
• [X] df-button-clicked
• [X] df-chip-clicked
• [X] df-info-card-clicked
• [X] df-list-element-clicked
• [X] df-messenger-error
• [ ] df-messenger-loaded
• [X] df-request-sent
• [X] df-response-received
• [X] df-user-input-entered

Future Plans

• [ ] Add more style settings
• [ ] Expose messages array
• [ ] Add "Typying" animation
• [ ] Add support for Dialogflow ES

Change Log

0.0.1 First release completely operational!

Author

Danyel Cabello, [e-mail]

React Native Gifted Chat

This project is based on React Native Gifted Chat

License

React Native Library Boilerplate is available under the Apache2 license. See the LICENSE file for more info.