\n {this.state.files.map(file => {\n return (\n
\n )\n }\n\n getTextArea() {\n if (this.props.selected_language) {\n return locale[this.props.selected_language].textArea\n }\n }\n\n render() {\n const { classes } = this.props;\n return (\n \n
\n \n \n );\n }\n}\n\nMyTextInput.propTypes = {\n classes: PropTypes.object.isRequired\n};\n\nexport default withStyles(styles)(MyTextInput);\n","import React from 'react';\nimport Rating from '@material-ui/lab/Rating';\nimport Typography from '@material-ui/core/Typography';\nimport Box from '@material-ui/core/Box';\nimport { withStyles } from '@material-ui/core/styles';\nimport StarOutlineIcon from '@material-ui/icons/StarOutline';\nimport StarIcon from '@material-ui/icons/Star';\n\nconst styles = theme => ({\n iconFilled:{\n color:theme.palette.primary.main\n },\n iconEmpty:{\n color:theme.palette.primary.main\n }\n})\n\nclass SimpleRating extends React.Component{\n\n state = {\n disabled: false,\n rating: 0,\n opinion: \"\",\n };\n\n changeRating(event, newRating) {\n this.setState({\n rating: newRating,\n disabled: true\n });\n\n this.props.send_rating(newRating,this.props.index)\n }\n\n defaultLabelText(value) {\n let text=\"sin calificación\"\n if (value===1){\n text = \"una estrella\"\n }\n else if (value>1 && value<=5) {\n text = \"\"+ value + \" estrellas\"\n }\n return(text)\n }\n\n render() {\n const { classes } = this.props;\n return (\n \n \n }\n emptyIcon = { \n
\n );\n }\n}\n\nexport default withStyles(styles)(SimpleRating);","import React from \"react\";\nimport List from \"@material-ui/core/List\";\nimport ListItem from \"@material-ui/core/ListItem\";\nimport ListItemText from \"@material-ui/core/ListItemText\";\nimport Collapse from \"@material-ui/core/Collapse\";\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Card from \"@material-ui/core/Card\";\nimport Typography from \"@material-ui/core/Typography\";\nimport ExpandLess from '@material-ui/icons/ExpandLess';\nimport ExpandMore from \"@material-ui/icons/ExpandMore\";\n\n\nconst styles = theme => ({\n cardRoot: {\n // boxShadow: \"none\",\n // borderRadius: \"0em 1em 1em\",\n // border: \"1px solid rgb(222, 225, 229)\"\n },\n root: {\n width: \"100%\",\n maxWidth: 360,\n backgroundColor: theme.palette.background.paper\n },\n nested: {\n paddingLeft: \"10%\"\n\n // borderStyle: \"solid\",\n // borderWidth: \"1px\",\n // borderRight: \"none\",\n // borderLeft: \"none\",\n // borderColor: \"rgb(222, 225, 229)\"\n },\n text: {\n fontSize: \"15px\",\n marginLeft: \"15px\",\n color: theme.palette.primary.main,\n fontFamily: \"'open_sans',Helvetica,Arial,sans-serif\",\n lineHeight: \"15px\",\n fontWeight: 600,\n marginTop: \"5px\",\n marginBottom: \"5px\",\n \n },\n text2: {\n color: \"rgba(0, 0, 0, 0.54)\",\n fontFamily: \"'open_sans',Helvetica,Arial,sans-serif\",\n fontSize: \"15px\",\n background: \"-webkit-linear-gradient(#333, #eee); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\"\n },\n textDesplegable: {\n fontSize: \"15px\",\n color: \"#333333\",\n lineHeight: \"15px\",\n fontFamily: \"'open_sans',Helvetica,Arial,sans-serif\",\n fontWeight: 600\n },\n divDesplegable: {\n padding: \"0\",\n paddingBottom: \"4px\",\n paddingTop: \"6px\"\n },\n item: {\n padding: 3\n },\n headers: {\n fontSize: \"15px\",\n fontFamily: \"'open_sans',Helvetica,Arial,sans-serif\",\n },\n listSubheader: {\n fontSize: \"15px\",\n fontWeight: 600,\n fontFamily: \"'open_sans',Helvetica,Arial,sans-serif\",\n color: \"#333333\"\n },\n divList: {\n borderStyle: \"solid\",\n borderWidth: \"1px\",\n borderRight: \"none\",\n borderLeft: \"none\",\n borderColor: \"rgb(222, 225, 229)\"\n }\n});\n\nclass DesplegableDoble extends React.Component {\n state = {\n };\n\n handleClick = menu => {\n this.setState({ [menu]: !this.state[menu] });\n };\n\n buttonClick = event => {\n this.props.onButtonClick(event);\n };\n\n render() {\n const { classes } = this.props;\n const { data } = this.props;\n return (\n \n \n
\n ))}\n \n );\n }\n })}\n \n );\n }\n}\n\nexport default withStyles(styles)(DesplegableDoble);","import Button from \"@material-ui/core/Button\";\nimport Card from \"@material-ui/core/Card\";\nimport CardActions from \"@material-ui/core/CardActions\";\nimport CardContent from \"@material-ui/core/CardContent\";\nimport GridList from \"@material-ui/core/GridList\";\nimport Icon from \"@material-ui/core/Icon\";\nimport Paper from \"@material-ui/core/Paper\";\nimport { withStyles } from \"@material-ui/core/styles\";\nimport Typography from \"@material-ui/core/Typography\";\nimport autoscroll from \"autoscroll-react\";\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport Avatar from '@material-ui/core/Avatar';\nimport SimpleRating from './components/SimpleRating';\n\nimport DesplegableDoble from \"./components/DesplegableDoble\"\nimport ReactPlayer from 'react-player'\n\nimport generate_response from \"./multimedia/writing2.gif\";\nimport perfil_bot from \"./images/perfil_2.png\"\nimport perfil_user from \"./images/perfil.png\"\nimport notificationBot from \"./multimedia/notificationBot.mp3\"\nimport notificacionUser from \"./multimedia/notificationUser.mp3\"\n\nconst videos = {}\n\nconst styles = theme => ({\n root: {\n overflowY: \"auto\",\n flex: 1,\n padding: \"0.5em\"\n },\n fullMessage: {\n display: \"flex\",\n fontSize: \"0.9em\",\n margin: \"0.3em\",\n maxWidth: \"100%\",\n marginRight: \"1em\",\n flexDirection: \"column\"\n },\n messageBlock: {\n display: \"flex\",\n flexDirection: \"row\",\n marginBottom: \"20px\"\n },\n optionsContainer: {\n marginLeft: \"60px\",\n marginBottom: \"18px\",\n flexWrap: \"wrap\",\n justifyContent: \"space-evenly\"\n },\n messageBubble: {\n flexDirection: \"row\",\n overflow: \"hidden\",\n alignItems: \"flex-end\",\n boxShadow: \"none\",\n padding: \"10px 15px\",\n \"& ol\": {\n paddingLeft: \"0px\"\n },\n \"& ul\": {\n margin: \"5px 0 0 0\",\n paddingLeft: \"2.72rem\"\n }\n },\n messageText: {\n whiteSpace: \"pre-line\",\n overflowWrap: \"break-word\",\n fontFamily: \"'Lato',sans-serif\",\n fontSize: \"1.5rem\",\n wordWrap: \"break-word\",\n maxWidth: \"250px\",\n textAlign: \"left\",\n \"& p\": {\n margin: 0,\n paddingBottom: 0\n },\n \"& a\": {\n color: \"#0645AD\",\n textDecoration: \"none\",\n \"&:visited\": {\n color: \"#800080\",\n },\n \"&:hover\": {\n color: \"#3366BB\",\n textDecoration: \"underline\",\n },\n },\n\n \"& li\": {\n marginBottom: \"0.4em\"\n },\n \"& ul\": {\n whiteSpace: \"normal\"\n }\n },\n messageWarning: {\n whiteSpace: \"pre-line\",\n overflowWrap: \"break-word\",\n fontFamily: \"'Lato',sans-serif\",\n fontSize: \"1.5rem\",\n wordWrap: \"break-word\",\n maxWidth: \"260px\",\n textAlign: \"justify\",\n \"& p\": {\n margin: 0,\n paddingBottom: \"0.5rem\"\n },\n },\n date: {\n fontFamily: \"'Lato',sans-serif\",\n margin: \"10px 5px\",\n fontSize: \"1.1rem\",\n fontStyle: \"italic\",\n textAlign: \"right\",\n paddingBottom: 0,\n \"& p\": {\n margin: 0,\n paddingBottom: 0\n },\n },\n imageContainer: {\n width: \"100%\"\n },\n card: {\n maxWidth: 345,\n minWidth: 200\n },\n cardSize: {\n height: 210,\n backgroundColor: \"#f8f8f8\",\n display: \"flex\",\n flexDirection: \"column\"\n },\n cardContent: {\n whiteSpace: \"pre-line\",\n overflowWrap: \"break-word\",\n paddingTop: \"0.7em\",\n paddingBottom: \"0\",\n height: \"100%\",\n flex: 1\n },\n media: {\n height: 140\n },\n slider: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: 4,\n justifyContent: \"space-around\",\n overflow: \"hidden\",\n width: \"auto\",\n backgroundColor: theme.palette.background.paper\n },\n gridList: {\n flexWrap: \"nowrap\",\n paddingLeft: 4,\n // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.\n transform: \"translateZ(0)\"\n },\n cardActionArea: {\n flex: 1\n },\n cardButtons: {\n flex: 0\n },\n cardText: {\n marginBottom: 0,\n \"& a\": {\n color: theme.palette.primary.main\n },\n \"& li\": {\n marginBottom: \"0.4em\"\n }\n },\n button: {\n maxWidth: \"283px\",\n width: \"100%\",\n minHeight: \"40px\",\n margin: \"2px 0 9px 0\",\n fontFamily: \"'Lato',sans-serif\",\n fontSize: \"1.28rem\",\n lineHeight: \"1.3em\",\n borderRadius: \"4px\",\n textAlign: \"Left\",\n justifyContent: \"start\",\n padding: \"8px 15px\"\n },\n buttonWelcome: {\n maxWidth: \"276px\",\n width: \"100%\",\n margin: \"2px 0 2px 0\",\n fontFamily: \"'Lato',sans-serif\",\n fontSize: \"1.28rem\",\n lineHeight: \"1.3em\",\n borderRadius: \"4px\",\n textAlign: \"Left\",\n justifyContent: \"start\"\n },\n IBMCard: {\n fontFamily: \"Helvetica\",\n width: \"90%\",\n marginLeft: \"1em\"\n },\n IBMCardTitle: {\n padding: \"10px\",\n fontSize: \"1.3rem\"\n },\n IBMCardSubtitle: {\n padding: \"11px\",\n marginTop: \"-1.2em\"\n },\n messageBubbleGenerate: {\n marginTop: \"3px\",\n marginLeft: \"5px\",\n boxShadow: \"0px 0px 0px 0px\"\n },\n generateResponse: {\n width: \"4rem\",\n padding: \"5px\"\n },\n perfil: {\n margin: \"10px\"\n }\n});\n\nclass MyList extends React.Component {\n buttonClick(event) {\n this.props.onButtonClick(event.target.textContent);\n }\n minimize = (m) => {\n this.props.minimize();\n }\n\n postbackButtonClick(event) {\n this.props.onPostbackButtonClick(event);\n }\n\n disambiguationIBMButtonClick(event) {\n this.props.onDisambiguationIBMButtonClick(event);\n }\n\n buttonDesplegableClick(event) {\n this.props.eventButtonClick({ \"payload\": event.payload, \"text\": event.text_label });\n this.messagesEnd.scrollIntoView({ behavior: \"smooth\", inline: \"end\" });\n }\n\n\n\n options = (message, index) => {\n if (message.type === \"quick_replies\") {\n return this.quickReplies(message.data);\n } else if (message.type === \"text_button\") {\n return this.textButtons(message.data);\n } else if (message.type === \"postback_button\") {\n if (!message.disabled) {\n if (this.props.primera_vez) {\n return this.postbackButtonsWelcome(message.data)\n }\n else {\n return this.postbackButtons(message.data)\n };\n }\n } else if (message.type === \"disambiguationIBM\") {\n return this.disambiguationIBMButtons(message.data);\n } else if (message.type === \"phone_button\") {\n return this.phoneButton(message.data);\n } else if (message.type === \"text_card\") {\n return this.mountSlider(message.data);\n // else if (message.type === \"image_card\") {\n // return (\n // - \n
\n 
\n
\n );\n });\n };\n\n showVideo = message => {\n return message.data.map(v => {\n const identifier = v.id\n const key = message.key + \"_\" + v.id;\n return (\n \n \n {this.showCard(message)}\n \n
\n );\n };\n\n showCard = message => {\n const { classes } = this.props;\n return message.map(m => {\n return (\n \n \n {/* */}\n \n \n {m.title}\n \n \n {m.subtitle}\n \n \n \n {/* */}\n \n {this.postbackButtons(m.buttons)}\n \n \n
\n );\n });\n };\n\n phoneButton = message => {\n const { classes } = this.props;\n return message.buttons.map(m => {\n const key = message.key + \"_\" + m.text;\n return (\n \n phone \n \n {m.text}\n \n
\n );\n });\n };\n\n quickReplies = message => {\n const { classes } = this.props;\n return (\n \n {message.buttons.map(m => {\n return (\n \n {m.text}\n \n );\n })}\n
\n );\n };\n\n showWarning = message => {\n const { classes } = this.props;\n return message.data.map(m => {\n const key = m.key + \"_\" + m.text;\n return (\n \n \n
\n );\n }\n }\n\n\n render() {\n const { classes } = this.props;\n let counter = 0\n const stack_length = this.props.messages.length;\n let indexAudio = 0;\n for (let i = 0; i < stack_length; i++) {\n indexAudio = i;\n }\n let useless_pos = this.manage_disabled_position(stack_length)\n\n return (\n \n {this.props.messages.map((m, index) => {\n m.disabled = (stack_length - 1 - useless_pos === index) ? false : true;\n return (\n\n \n {this.renderMessage(m)}\n {this.options(m, index) ? (\n
\n\n );\n })}\n\n \n {this.options(m, index)}\n
\n ) : null}\n {this.renderNotification(m, index, indexAudio)}\n {this.renderWriting()}
\n \n
\n \n )\n }\n}\n\nexport default Maximized;\n","import React from 'react'\nimport IconButton from '@material-ui/core/IconButton';\nimport Chat from '@material-ui/icons/Chat'\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Paper from '@material-ui/core/Paper';\n\n\nconst styles = theme => ({\n widget: {\n position: \"fixed\",\n right: \"-3rem\",\n bottom: \"calc(-3rem + 60px)\",\n zIndex: 100000,\n \"@media (max-width: 490px)\": {\n bottom: \"130px\",\n },\n \"@media (max-height: 515px)\": {\n bottom: \"130px\",\n }\n },\n icon: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '6rem',\n height: '6rem',\n background: \"#ffcb77\",\n borderRadius: '50%',\n cursor: 'pointer',\n border: \"solid #00325f 2px\",\n },\n chat: {\n width: \"90%\",\n height: \"90%\",\n color: \"#00325f\",\n },\n textbubble: {\n position: \"relative\",\n right: \"6.4rem\",\n bottom: \"11rem\",\n },\n paper: {\n background: \"rgb(255, 203, 119, 0.8)\",\n color: \"#00325f\",\n borderRadius: 0,\n fontFamily: \"'Lato',sans-serif\",\n fontSize: \"1.5rem\",\n fontWeight: 600,\n padding: \"0.8rem 1rem 0.8rem 0.8rem\",\n userSelect: \"none\",\n cursor: \"pointer\"\n },\n arrowDown: {\n width: 0,\n height: 0,\n left: \"8rem\",\n borderLeft: \"1.7rem solid transparent\",\n borderRight: \"0 solid transparent\",\n borderTop: \"1rem solid rgb(255, 203, 119, 0.8)\",\n position: \"relative\",\n background: \"transparent\",\n userSelect: \"none\",\n cursor: \"pointer\"\n }\n})\n\nclass Minimized extends React.Component {\n\n maximize = () => {\n this.props.maximize()\n }\n\n render() {\n const { classes } = this.props;\n return (\n \n \n \n \n
\n \n
\n \n )\n }\n\n}\n\nMinimized.propTypes = {\n classes: PropTypes.object.isRequired,\n};\n\nexport default withStyles(styles)(Minimized);","import Paper from '@material-ui/core/Paper';\nimport { createTheme, MuiThemeProvider, withStyles } from '@material-ui/core/styles';\nimport React from 'react';\nimport Grow from '@material-ui/core/Grow';\nimport { storeItem, getValueFromSessionStored } from \"./Session\";\n\nimport Maximized from './Maximized';\nimport Minimized from './Minimized';\nconst defaultStyles = require('./styles/default.json')\nexport const defaultTheme = createTheme(defaultStyles)\n\nconst styles = () => ({\n paper: {\n zIndex: \"100000\",\n position: \"fixed\",\n bottom: \"60px\",\n right: \"15px\",\n display: \"flex\",\n flexDirection: \"column\",\n maxHeight: \"calc(100vh - 60px)\",\n height: \"1000px\",\n width: \"400px\",\n transition: \"all 100ms ease-out 0s\",\n transform: \"none\",\n \"@media (max-width: 490px)\": {\n width: \"100%\",\n bottom: \"130px\",\n right: \"0em\",\n height: \"100%\",\n maxHeight: \"calc(100vh - 130px)\"\n },\n \"@media (max-height: 515px)\": {\n bottom: \"130px\",\n right: \"0em\",\n height: \"100%\",\n maxHeight: \"calc(100vh - 130px)\"\n },\n }\n})\n\n\n\nclass Chat extends React.Component {\n constructor(props) {\n super(props);\n //sessionStorage.clear();\n this.state = {\n theme: defaultTheme,\n languages: [\"es\"],\n selected_language: \"es\",\n params: {},\n windowState: getValueFromSessionStored(\"chatbotState\", \"minimized\")\n }\n }\n\n updateLanguage = (selected) => {\n this.setState({ selected_language: selected })\n }\n\n minimize = () => {\n this.setState({ windowState: \"minimized\" })\n storeItem(\"chatbotState\", \"minimized\")\n }\n\n maximize = () => {\n this.setState({ windowState: \"maximized\" })\n storeItem(\"chatbotState\", \"maximized\")\n }\n\n render() {\n const { classes } = this.props;\n if (this.state.windowState === \"maximized\") {\n return (\n Te ayudamos
\n \n