{children}
;
+};
+
+ButtonContainer.propTypes = {
+ children: PropTypes.node
+};
+
+export default ButtonContainer;
\ No newline at end of file
diff --git a/src/components/ButtonContainer/index.js b/src/components/ButtonContainer/index.js
deleted file mode 100644
index c397b7c..0000000
--- a/src/components/ButtonContainer/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-//import { connect } from 'react-redux';
-
-import { compose, setPropTypes } from 'recompose';
-import PropTypes from 'prop-types';
-
-const enhance = compose(
- setPropTypes({
- connection: PropTypes.object,
- typing: PropTypes.bool
- })
-);
-
-export const ButtonContainer = ({ children }) => {
- return {children}
;
-};
-
-export default enhance(ButtonContainer);
diff --git a/src/components/ChatContainer.jsx b/src/components/ChatContainer.jsx
new file mode 100644
index 0000000..a1d7ae9
--- /dev/null
+++ b/src/components/ChatContainer.jsx
@@ -0,0 +1,95 @@
+import React, { Fragment, useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Fade } from '../themes/default/components/Animation';
+
+import MessageList from './MessageList';
+import InputArea from './InputArea';
+
+/**
+ * ChatContainer - The main container for the chat interface
+ */
+const ChatContainer = ({ theme, toggleComponent, setNetwork }) => {
+ const connection = useSelector(state => state.connection);
+ const [hasError, setHasError] = useState(false);
+ const [showChat, setShowChat] = useState(!toggleComponent);
+
+ // Error boundary functionality
+ useEffect(() => {
+ const errorHandler = (error) => {
+ setHasError(true);
+ console.error('Chat error:', error);
+ };
+
+ window.addEventListener('error', errorHandler);
+ return () => window.removeEventListener('error', errorHandler);
+ }, []);
+
+ const toggleShowChat = () => {
+ setShowChat(!showChat);
+ setNetwork && setNetwork();
+ };
+
+ if (hasError) return
+
+ {showChat && (
+
+ )}
+
+ )}
+ {showChat && (
+
+
+
-
- {showChat && (
-
- )}
-
- )}
- {showChat && (
-
-
-
+ {inputExpected === 'checkbox' && (
+
+ );
+};
+
+InputArea.propTypes = {
+ InputComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+ MenuComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+ CheckboxMenuComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
+};
+
+export default InputArea;
\ No newline at end of file
diff --git a/src/components/InputArea/index.js b/src/components/InputArea/index.js
deleted file mode 100644
index ea341d4..0000000
--- a/src/components/InputArea/index.js
+++ /dev/null
@@ -1,78 +0,0 @@
-// @ts-check
-import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import { compose, setPropTypes } from 'recompose';
-
-import * as messageActions from '../../actions/messages';
-import { getLatestRemote } from '../../utils/helpers';
-
-const mapStateToProps = ({ messages, config }) => {
- let latestMessage = getLatestRemote(messages.messages);
- return {
- inputExpected: latestMessage && latestMessage.input_expected,
- buttons: config.menu.buttons
- };
-};
-
-const mapDispatchToProps = dispatch => ({
- submitHandler: payload => {
- dispatch(messageActions.messageSend(payload));
- },
- onKeyDown: (event, text) => {
- if (event.keyCode === 13) {
- dispatch(
- messageActions.messageSend({
- text: text
- })
- );
- return true;
- }
- return false;
- }
-});
-
-const enhance = compose(
- setPropTypes({
- messages: PropTypes.object
- }),
- connect(
- mapStateToProps,
- mapDispatchToProps
- )
-);
-
-export const InputArea = ({
- InputComponent,
- submitHandler,
- onKeyDown,
- inputExpected,
- MenuComponent,
- CheckboxMenuComponent,
- buttons
-}) => {
- return (
-
- {inputExpected === 'checkbox' && (
-
- );
-};
-
-export default enhance(InputArea);
diff --git a/src/components/LinkifyWrapper.jsx b/src/components/LinkifyWrapper.jsx
new file mode 100644
index 0000000..b2a849f
--- /dev/null
+++ b/src/components/LinkifyWrapper.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactLinkify from 'react-linkify';
+import PropTypes from 'prop-types';
+
+/**
+ * LinkifyWrapper - A wrapper around react-linkify with proper typing
+ */
+const LinkifyWrapper = ({ children, componentDecorator }) => {
+ // This component just wraps the react-linkify component to avoid type issues
+ return
+ {source}
+
+ );
+};
+
+Markdown.propTypes = {
+ source: PropTypes.string.isRequired,
+ className: PropTypes.string
+};
+
+Markdown.defaultProps = {
+ className: ''
+};
+
+export default Markdown;
\ No newline at end of file
diff --git a/src/components/Message.jsx b/src/components/Message.jsx
new file mode 100644
index 0000000..7561bc5
--- /dev/null
+++ b/src/components/Message.jsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ButtonContainer from './ButtonContainer';
+
+/**
+ * Message - Component for rendering different types of message content
+ */
+const Message = ({
+ page,
+ isLocal,
+ ImageComponent,
+ InputComponent,
+ MessageComponent,
+ TextComponent,
+ ButtonComponent,
+ submitHandler
+}) => {
+ return [
+ page.image &&
+ {layout === 'carousel' ? (
+
+ {React.Children.map(children, child => (
+
+ ) : (
+ children
+ )}
+
+ );
+};
+
+MessageContainer.propTypes = {
+ userId: PropTypes.string,
+ type: PropTypes.string,
+ children: PropTypes.node,
+ layout: PropTypes.oneOf(['plain', 'list', 'carousel']),
+ origin: PropTypes.string,
+ pages: PropTypes.array
+};
+
+export default MessageContainer;
\ No newline at end of file
diff --git a/src/components/MessageContainer/index.js b/src/components/MessageContainer/index.js
deleted file mode 100644
index 249a8dd..0000000
--- a/src/components/MessageContainer/index.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import Slider from 'react-slick';
-
-const layoutClasses = {
- plain: 'MessageContainer',
- list: 'ListContainer',
- carousel: 'CarouselContainer'
-};
-
-// TODO: Test browser resizing
-const sliderSettings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1,
- nextArrow: ,
- prevArrow: ,
- adaptiveHeight: true
-};
-
-const MessageContainer = ({ userId, type, children, layout, origin, pages, ...rest }) => {
- let hasSelectedInput = rest.selectedInput !== undefined && rest.selectedInput !== null;
-
- return (
- {child}
+ ))}
+
- {layout === 'carousel' ? (
-
- {React.Children.map(children, child => (
-
- ) : (
- children
- )}
-
- );
-};
-
-export default MessageContainer;
diff --git a/src/components/MessageList.jsx b/src/components/MessageList.jsx
new file mode 100644
index 0000000..0084d10
--- /dev/null
+++ b/src/components/MessageList.jsx
@@ -0,0 +1,99 @@
+import React, { useRef, useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import smoothScrollTo from 'smooth-scroll-to-js';
+import AvatarContainer from './AvatarContainer';
+
+import MessageContainer from './MessageContainer';
+import * as messageActions from '../actions/messages';
+import MessageListItem from './MessageListItem';
+
+/**
+ * MessageList - Component for rendering the list of messages in the chat
+ */
+const MessageList = ({ theme }) => {
+ const dispatch = useDispatch();
+ const messages = useSelector(state => state.messages.messages);
+ const messageQueue = useSelector(state => state.messages.messageQueue);
+ const config = useSelector(state => state.config);
+
+ const lastMsgRef = useRef(null);
+ const containerRef = useRef(null);
+
+ const submitHandler = (message, type = 'button') => {
+ dispatch(
+ messageActions.messageSend({
+ ...message,
+ type: type
+ })
+ );
+ };
+
+ // Scroll to the newest message
+ useEffect(() => {
+ if (lastMsgRef.current && containerRef.current) {
+ smoothScrollTo({
+ to: lastMsgRef.current,
+ container: containerRef.current,
+ duration: 1
+ });
+ }
+ }, [messages]);
+
+ return (
+ {child}
- ))}
-
+
+ );
+};
+
+MessageList.propTypes = {
+ theme: PropTypes.shape({
+ AvatarComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+ ImageComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+ InputComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+ MessageComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+ TextComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+ ButtonComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+ TypingIndicatorComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
+ }).isRequired,
+ messages: PropTypes.array,
+ messageQueue: PropTypes.array,
+ config: PropTypes.object
+};
+
+export default MessageList;
\ No newline at end of file
diff --git a/src/components/MessageList/AttachmentMessage.js b/src/components/MessageList/AttachmentMessage.js
deleted file mode 100644
index 1b2cac8..0000000
--- a/src/components/MessageList/AttachmentMessage.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React, { Component } from 'react';
-
-class AttachmentMessage extends Component {
- constructor(props) {
- super(props);
- this.state = { error: '', loading: false };
- }
-
- convertAndSaveAttachemnt(e) {
- const file = e.target.files[0];
- const reader = new FileReader();
-
- reader.onload = (() => e =>
- this.uploadAttachment(
- this.props.message,
- `data:${file.type};base64,${window.btoa(e.target.result)}`
- ))(file);
- reader.readAsBinaryString(file);
- }
-
- successfulUploadAttachment(response) {
- this.setState({
- loading: false,
- error: ''
- });
-
- response
- .json()
- .then(r => {
- this.props.submitHandler(
- {
- text: JSON.stringify({
- uuid: r.data.uuid,
- mime_type: r.data.mime_type
- }),
- showMessage: false
- },
- 'text'
- );
- })
- .catch(r => this.failureUploadAttachment(r));
- }
-
- failureUploadAttachment() {
- this.setState({
- loading: false,
- error: 'Something went wrong. Please try uploading again'
- });
-
- document.getElementById('file').value = '';
- }
-
- uploadAttachment(message, file) {
- this.setState({ loading: true, error: '' });
-
- const {
- attachment_end_point,
- authorization,
- organization_id,
- agent_id,
- bucket
- } = message;
-
- let headers = new Headers();
-
- headers.set('Authorization', authorization);
- headers.set('Content-Type', 'application/json');
- fetch(attachment_end_point, {
- method: 'POST',
- headers: headers,
- body: JSON.stringify({
- file: {
- base64: file,
- organization_id,
- agent_id,
- meta: {
- bucket
- }
- }
- })
- })
- .then(r => this.successfulUploadAttachment(r))
- .catch(r => this.failureUploadAttachment(r));
- }
-
- render() {
- const { loading, error } = this.state;
- const { message } = this.props;
-
- return (
- -
+ {messages.length < 1 && (
+
-
+
+ +++ ++
+ )}
+ {messages.map((message, i) => (
+ -
+
+ ++
+ )}
+
- {error &&
- );
- }
-}
-
-export default AttachmentMessage;
diff --git a/src/components/MessageList/MessageListItem.js b/src/components/MessageList/MessageListItem.js
deleted file mode 100644
index befaebf..0000000
--- a/src/components/MessageList/MessageListItem.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import AvatarContainer from '../AvatarContainer';
-import MessageContainer from '../MessageContainer';
-import AttachmentMessage from './AttachmentMessage';
-import Message from '../Message';
-
-class MessageListItem extends PureComponent {
- render() {
- const {
- itemRef,
- message,
- prevMessageOrigin,
- submitHandler,
- theme
- } = this.props;
- return (
- {error}
} - {loading && } - this.convertAndSaveAttachemnt(e)} - /> - {!loading && ( - - )} -
-
- {message.origin === 'remote' ? (
- message.pages.map((page, i) => (
-
- {message.buttons && message.buttonStyle === 'default' && (
-
- {message.buttons.map((button, i) => (
-
- submitHandler({
- postback: button.postback,
- text: button.text
- })
- }
- />
- ))}
-
- )}
- {message.message_type === 'attachment' && (
-
-
- )}
-
-
-
- );
- }
-}
-
-MessageList.propTypes = {
- messages: PropTypes.array,
- theme: PropTypes.shape({
- ImageComponent: PropTypes.oneOfType([
- PropTypes.element,
- PropTypes.func
- ]),
- InputComponent: PropTypes.oneOfType([
- PropTypes.element,
- PropTypes.func
- ]),
- MessageComponent: PropTypes.oneOfType([
- PropTypes.element,
- PropTypes.func
- ]),
- TextComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
- }),
- config: PropTypes.object
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(MessageList);
diff --git a/src/components/MessageListItem.jsx b/src/components/MessageListItem.jsx
new file mode 100644
index 0000000..ff3576a
--- /dev/null
+++ b/src/components/MessageListItem.jsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import AvatarContainer from './AvatarContainer';
+import MessageContainer from './MessageContainer';
+import Message from './Message';
+import AttachmentMessage from './AttachmentMessage';
+
+/**
+ * MessageListItem - Component for rendering a single message item in the list
+ */
+const MessageListItem = ({ message, prevMessageOrigin, submitHandler, theme, itemRef }) => {
+ const isLocal = message.origin === 'local';
+
+ return (
+ -
- {messages.length < 1 && (
-
-
-
- --- --
- )}
- {messages.map((message, i) => (
- -
-
- --
- ) : null}
-
+
+ {!isLocal ? (
+ message.pages.map((page, i) => (
+
+ {message.buttons && message.buttonStyle === 'default' && (
+
+ {message.buttons.map((button, i) => (
+
+ submitHandler({
+ postback: button.postback,
+ text: button.text
+ })
+ }
+ />
+ ))}
+
+ )}
+ {message.message_type === 'attachment' && (
+
+
+ )}
+
+ {children}
) : ( - -
+
+
+
)}
diff --git a/src/themes/unstyled/components/Button/index.js b/src/themes/unstyled/components/Button/index.js
deleted file mode 100644
index e4863d5..0000000
--- a/src/themes/unstyled/components/Button/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-//@ts-check
-import React from 'react';
-import PropTypes from 'prop-types';
-import { compose, setPropTypes } from 'recompose';
-
-const enhance = compose(
- setPropTypes({
- text: PropTypes.string,
- phone: PropTypes.string,
- url: PropTypes.string,
- onClick: PropTypes.func
- })
-);
-
-/**
- * A simple button component
- * @param {Object} param
- * @param {number} param.text - text to be rendered inside button.
- * @param {function(e: Object)} param.onClick - click handler function
- * @return {Object} React component
- */
-export const Button = ({ text, phone, url, onClick }) =>
- phone || url ? (
-
- {text}
-
- ) : (
-
- );
-
-export default enhance(Button);
diff --git a/src/themes/unstyled/components/Button/index.jsx b/src/themes/unstyled/components/Button/index.jsx
new file mode 100644
index 0000000..ff41310
--- /dev/null
+++ b/src/themes/unstyled/components/Button/index.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * A simple button component
+ */
+export const Button = ({ text, phone, url, onClick }) =>
+ phone || url ? (
+
+ {text}
+
+ ) : (
+
+ );
+
+Button.propTypes = {
+ text: PropTypes.string,
+ phone: PropTypes.string,
+ url: PropTypes.string,
+ onClick: PropTypes.func
+};
+
+export default Button;
\ No newline at end of file
diff --git a/src/themes/unstyled/components/Image/index.js b/src/themes/unstyled/components/Image/index.js
deleted file mode 100644
index 71f3448..0000000
--- a/src/themes/unstyled/components/Image/index.js
+++ /dev/null
@@ -1,53 +0,0 @@
-// @ts-check
-import React from 'react';
-import PropTypes from 'prop-types';
-import { compose, setPropTypes, lifecycle } from 'recompose';
-import { withState } from 'recompose';
-
-import { Fade } from '../Animation/index';
-
-const enhance = compose(
- setPropTypes({
- url: PropTypes.string.isRequired,
- text: PropTypes.string,
- width: PropTypes.number,
- height: PropTypes.number
- }),
- withState('loaded', 'setLoaded', false),
- lifecycle({
- componentDidMount: function(props) {
- let image = new Image(0, 0);
- image.src = this.props.url;
- image.addEventListener('load', () => {
- this.setState({ loaded: true });
- });
- }
- })
-);
-
-/**
- * An image
- * @param {Object} param
- * @param {string} param.url - image url
- * @param {number} param.width - width of the image in pixels
- * @param {number} param.height - height of the image in pixels
- * @return {Object} React component
- */
-
-export const ImageComponent = ({ url, text, loaded, height = 200 }) => {
- return (
-
- {loaded && 
}
- {text && (
-
- )}
-
-
+ {loaded && }
+ {text && (
+
+ )}
+
+ {
- let success = onKeyDown(event, value);
- if (success) {
- setValue('');
- }
- }}
- >
- setValue(value)}
- />
-
- );
-};
-
-export default enhance(Input);
diff --git a/src/themes/unstyled/components/Input/index.jsx b/src/themes/unstyled/components/Input/index.jsx
new file mode 100644
index 0000000..879c9e9
--- /dev/null
+++ b/src/themes/unstyled/components/Input/index.jsx
@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * A simple text Input component.
+ */
+const Input = ({ submitHandler, onKeyDown }) => {
+ const [value, setValue] = useState('');
+
+ const handleKeyDown = (event) => {
+ const success = onKeyDown(event, value);
+ if (success) {
+ setValue('');
+ }
+ };
+
+ const handleSubmit = () => {
+ submitHandler({ text: value });
+ setValue('');
+ };
+
+ return (
+
+ setValue(value)}
+ />
+
+
+ );
+};
+
+Input.propTypes = {
+ submitHandler: PropTypes.func,
+ onKeyDown: PropTypes.func
+};
+
+export default Input;
\ No newline at end of file
diff --git a/src/themes/unstyled/components/Menu/index.js b/src/themes/unstyled/components/Menu/index.js
deleted file mode 100644
index 50ea04c..0000000
--- a/src/themes/unstyled/components/Menu/index.js
+++ /dev/null
@@ -1,127 +0,0 @@
-// @ts-check
-import React from 'react';
-import { compose, withStateHandlers } from 'recompose';
-
-const enhance = compose(
- withStateHandlers(
- ({ initialState = false, initialItems = [] }) => ({
- open: initialState,
- selectedItems: initialItems
- }),
- {
- toggleState: ({ open }) => _ => ({
- open: !open
- }),
- toggleItem: ({ selectedItems }) => item => {
- let newItems = [...selectedItems];
- let index = newItems.indexOf(item);
- if (index === -1) {
- newItems.push(item);
- } else {
- newItems.splice(index, 1);
- }
- return { selectedItems: newItems };
- }
- }
- )
-);
-
-/**
- * A menu listing several items. (single choice)
- * @param {Object} param
- * @param {Array