From 3b2c26eb57dc4d7cc03a793bae594efcf3780b4e Mon Sep 17 00:00:00 2001 From: i321222 Date: Tue, 5 Mar 2019 23:17:01 +0800 Subject: [PATCH 1/5] make sure button.value is not null --- src/components/Message/List.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Message/List.js b/src/components/Message/List.js index 8a6539c0..38e939e1 100644 --- a/src/components/Message/List.js +++ b/src/components/Message/List.js @@ -25,7 +25,7 @@ const ListElement = ({ title, subtitle, imageUrl, buttons, sendMessage }) => { {button && (button.type === 'web_url' ? ( - sanitizeUrl(button.value) !== 'about:blank' && ( + button.value && sanitizeUrl(button.value) !== 'about:blank' && ( Date: Wed, 27 Mar 2019 11:07:55 +0800 Subject: [PATCH 2/5] detail page --- bin/build.js | 2 +- src/components/Message/List.js | 96 +++++++++++++++++++------------ src/components/Message/Text.js | 5 +- src/components/Message/style.scss | 6 ++ 4 files changed, 66 insertions(+), 43 deletions(-) diff --git a/bin/build.js b/bin/build.js index d29443f9..c244f71e 100644 --- a/bin/build.js +++ b/bin/build.js @@ -1,6 +1,6 @@ const webpack = require('webpack') -const webpackConfig = require('../webpack/prod.js') +const webpackConfig = require('../webpack/dev') const bundler = webpack(webpackConfig) diff --git a/src/components/Message/List.js b/src/components/Message/List.js index 38e939e1..540929e0 100644 --- a/src/components/Message/List.js +++ b/src/components/Message/List.js @@ -1,51 +1,70 @@ -import React from 'react' +import React, { Component } from 'react' import PropTypes from 'prop-types' + import { sanitizeUrl } from '@braintree/sanitize-url' import { truncate } from 'helpers' import Button from 'components/Button' +import Text from 'components/Message/Text' -const ListElement = ({ title, subtitle, imageUrl, buttons, sendMessage }) => { - const button = buttons[0] - const titleMaxLength = 25 - const subTitleMaxLength = 50 - const buttonTitleMaxLength = 20 - return ( -
- {imageUrl - && sanitizeUrl(imageUrl) !== 'about:blank' && ( - - )} +class ListElement extends Component { -
-

{truncate(title, titleMaxLength)}

-

{truncate(subtitle, subTitleMaxLength)}

+ state = { + showDetail: false + } - {button - && (button.type === 'web_url' ? ( - button.value && sanitizeUrl(button.value) !== 'about:blank' && ( - - {truncate(button.title, buttonTitleMaxLength)} - - ) - ) : ( -
sendMessage({ type: 'text', content: button.value })} - > - {truncate(button.title, buttonTitleMaxLength)} -
- ))} -
-
- ) + render () { + const { title, subtitle, imageUrl, buttons, detail, sendMessage } = this.props + const { showDetail} = this.state + const button = buttons[0] + const titleMaxLength = 25 + const subTitleMaxLength = 50 + const buttonTitleMaxLength = 20 + return ( +
+
+ {imageUrl + && sanitizeUrl(imageUrl) !== 'about:blank' && ( + + )} + +
+

this.setState({ showDetail: !showDetail })}> + {truncate(title, titleMaxLength)} +

+

{truncate(subtitle, subTitleMaxLength)}

+ + {button + && (button.type === 'web_url' ? ( + button.value && sanitizeUrl(button.value) !== 'about:blank' && ( + + {truncate(button.title, buttonTitleMaxLength)} + + ) + ) : ( +
sendMessage({ type: 'text', content: button.value })} + > + {truncate(button.title, buttonTitleMaxLength)} +
+ ))} +
+
+ {detail && ( + + )} +
+ ) + } } ListElement.propTypes = { @@ -53,6 +72,7 @@ ListElement.propTypes = { subtitle: PropTypes.string, imageUrl: PropTypes.string, buttons: PropTypes.array, + detail: PropTypes.string, sendMessage: PropTypes.func, } diff --git a/src/components/Message/Text.js b/src/components/Message/Text.js index 0620828b..7007cace 100644 --- a/src/components/Message/Text.js +++ b/src/components/Message/Text.js @@ -23,10 +23,7 @@ const Text = ({ content, style }) => { return (
- {sanitizeHtml(truncate(respond, 640)) - .replace(/&/g, 'g') - .replace(/</g, '<') - .replace(/>/g, '>')} + {respond}
) } diff --git a/src/components/Message/style.scss b/src/components/Message/style.scss index 60da9043..2ae617af 100644 --- a/src/components/Message/style.scss +++ b/src/components/Message/style.scss @@ -194,8 +194,14 @@ .RecastAppListElement, .CaiAppListElement { display: flex; + flex-direction: column; width: 290px; + &--head { + display: flex; + width: 100%; + } + &--img { width: 80px; height: 80px; From 36cc77d0a9289db57f9f77c9f428b14eb77208ba Mon Sep 17 00:00:00 2001 From: i321222 Date: Thu, 4 Apr 2019 16:39:26 +0800 Subject: [PATCH 3/5] multiple buttons in List and 6 buttons in 'buttons message' --- src/components/Message/Buttons.js | 2 +- src/components/Message/List.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Message/Buttons.js b/src/components/Message/Buttons.js index 4e15c9e8..5676cf4e 100644 --- a/src/components/Message/Buttons.js +++ b/src/components/Message/Buttons.js @@ -16,7 +16,7 @@ const Buttons = ({ content, sendMessage, style }) => {

- {buttons.slice(0, 3).map((b, i) => ( + {buttons.slice(0, 6).map((b, i) => (
diff --git a/src/components/Message/List.js b/src/components/Message/List.js index 540929e0..87dd6370 100644 --- a/src/components/Message/List.js +++ b/src/components/Message/List.js @@ -18,7 +18,6 @@ class ListElement extends Component { render () { const { title, subtitle, imageUrl, buttons, detail, sendMessage } = this.props const { showDetail} = this.state - const button = buttons[0] const titleMaxLength = 25 const subTitleMaxLength = 50 const buttonTitleMaxLength = 20 @@ -36,8 +35,8 @@ class ListElement extends Component { {truncate(title, titleMaxLength)}

{truncate(subtitle, subTitleMaxLength)}

- - {button + {buttons.slice(0, 3).map((button, i) => ( + button && (button.type === 'web_url' ? ( button.value && sanitizeUrl(button.value) !== 'about:blank' && ( {truncate(button.title, buttonTitleMaxLength)} - ))} + ))) + )} {detail && ( From d00202d542572dc3499609f7d0bc6183d7a45eb8 Mon Sep 17 00:00:00 2001 From: i321222 Date: Fri, 14 Jun 2019 17:30:35 +0800 Subject: [PATCH 4/5] change z-index of webchat expander. --- src/components/Expander/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Expander/style.scss b/src/components/Expander/style.scss index 991c6398..dc78bf2d 100644 --- a/src/components/Expander/style.scss +++ b/src/components/Expander/style.scss @@ -11,6 +11,7 @@ border-radius: 3px; box-shadow: 0 1px 6px lightgrey, 0 2px 32px lightgrey; transition: opacity 0.3s; + z-index: 2147483647; &.open { opacity: 1; From 9074b0cf854ca2696417f8b2b8100888fdbb14de Mon Sep 17 00:00:00 2001 From: i321222 Date: Fri, 14 Jun 2019 18:24:03 +0800 Subject: [PATCH 5/5] support iframe --- src/components/Live/style.scss | 4 ++-- src/components/Message/Text.js | 16 +++++++++++++++- src/components/Message/style.scss | 2 +- src/containers/Chat/style.scss | 6 +++--- 4 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/components/Live/style.scss b/src/components/Live/style.scss index daee6742..50c682ae 100644 --- a/src/components/Live/style.scss +++ b/src/components/Live/style.scss @@ -11,8 +11,8 @@ } } -@media only screen and (min-width: 420px) and (min-height: 575px) { +@media only screen and (min-width: 1000px) and (min-height: 900px) { .RecastApp .RecastAppLive, .CaiApp .CaiAppLive { - height: 460px; + height: 800px; } } diff --git a/src/components/Message/Text.js b/src/components/Message/Text.js index 7007cace..9a406580 100644 --- a/src/components/Message/Text.js +++ b/src/components/Message/Text.js @@ -7,10 +7,21 @@ import { truncate } from 'helpers' import './style.scss' const Text = ({ content, style }) => { - let respond + let respond, iframeSrc, iframeWidth, iframeHeight, iframeScroll if (typeof content === 'string') { respond = content + if(respond.indexOf("iframe")!=-1){ + // var str = '