Merge pull request #1619 from botpress/ya-refactor-channelweb

chore(channel-web): refactoring

examples/custom-component/src/hooks/after_incoming_middleware/advanced.js

@@ -0,0 +1,63 @@
+if (event.preview === 'disappearKeyboard') {
+  const payload = {
+    type: 'custom',
+    module: 'feedback',
+    component: 'DisappearingText',
+    myrandomproperty:
+      'This text will disappear when the timer expires. You can add any component, buttons, etc as a keyboard',
+    wrapped: {
+      // We can wrap an existing component
+      ...event.payload
+    }
+  }
+  bp.events.replyToEvent(event, [payload])
+}
+
+if (event.preview === 'feedbackKeyboard') {
+  const payload = {
+    type: 'custom',
+    module: 'feedback',
+    component: 'FeedbackButtons',
+    wrapped: {
+      // Wrap an existing event...
+      ...event.payload,
+
+      // Or create a new one
+      type: 'text',
+      text: 'bla'
+    }
+  }
+  bp.events.replyToEvent(event, [payload])
+}
+
+if (event.preview === 'multiLineKeyboard') {
+  const payload = {
+    type: 'text',
+    text: 'how can i help you?',
+    quick_replies: [
+      [{ label: 'row 1, button 1', payload: 'something' }, { label: 'row 1, button 2', payload: 'something' }],
+      [{ label: 'row 2, button 1', payload: 'something' }],
+      [{ label: 'row 3, button 1', payload: 'something' }]
+    ]
+  }
+  bp.events.replyToEvent(event, [payload])
+}
+
+if (event.preview === 'wrapperExample') {
+  const payload = {
+    type: 'custom',
+    module: 'feedback',
+    component: 'ColorText',
+    color: '#ff0000',
+    wrapped: {
+      type: 'custom',
+      module: 'feedback',
+      component: 'UpperCase',
+      wrapped: {
+        type: 'text',
+        text: 'this will be colored red & in uppercase '
+      }
+    }
+  }
+  bp.events.replyToEvent(event, [payload])
+}

examples/custom-component/src/views/lite/components/Advanced.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+
+export class DisappearingText extends React.Component {
+  state = {
+    visible: true
+  }
+  componentDidMount() {
+    // Text disappear in 5 seconds. You can also get the date the message was sent by using this.props.sentOn
+    setTimeout(() => {
+      this.setState({ visible: false })
+    }, 5000)
+  }
+
+  render() {
+    const Keyboard = this.props.keyboard
+
+    // Prepent to add something before the composer, and Append to add after
+    return (
+      <Keyboard.Prepend keyboard={this.props.myrandomproperty} visible={this.state.visible}>
+        This text is always visible in the chat window
+      </Keyboard.Prepend>
+    )
+  }
+}
+
+export class FeedbackButtons extends React.Component {
+  sendSatisfied = () => {
+    this.props.onSendData({ payload: { type: 'user_satisfied', text: 'satisfied' } })
+  }
+
+  sendMoreInfo = () => {
+    this.props.onSendData({ payload: { type: 'more_info', text: 'more info about ...' } })
+  }
+
+  renderBtn() {
+    return (
+      <div>
+        <button onClick={this.sendSatisfied}>I am satisfied</button>
+        <button onClick={this.sendMoreInfo}>I need more info</button>
+      </div>
+    )
+  }
+
+  // This simple example will show two buttons after the bot's answer (only the latest one) asking for feedback
+  render() {
+    const Keyboard = this.props.keyboard
+    return (
+      <Keyboard.Append keyboard={this.renderBtn()} visible={this.props.isLastGroup}>
+        {this.props.children}
+      </Keyboard.Append>
+    )
+  }
+}
+
+export const ColorText = props => {
+  return <div style={{ color: props.color }}>{props.children}</div>
+}
+
+export const UpperCase = props => {
+  return <div style={{ textTransform: 'uppercase' }}>{props.children}</div>
+}

examples/custom-component/src/views/lite/index.jsx

@@ -9,6 +9,8 @@ export { LoginForm } from './components/LoginForm'
 // This is an example on how to replace the webchat composer (the typing zone)
 export { Composer } from './components/Composer'
 
+export { DisappearingText, FeedbackButtons, UpperCase, ColorText } from './components/Advanced'
+
 export class InjectedBelow extends React.Component {
   render() {
     // Return null if you just want to interact with the chat.

modules/builtin/src/content-types/action_button.js

@@ -32,6 +32,10 @@ module.exports = {
             properties: {
               action: {
                 enum: ['Say something']
+              },
+              text: {
+                type: 'string',
+                title: 'Enter text or the ID of a content element (ex: #!builtin_text-myid)'
               }
             }
           },

modules/builtin/src/content-types/carousel.js

@@ -24,16 +24,19 @@ function render(data) {
         buttons: (card.actions || []).map(a => {
           if (a.action === 'Say something') {
             return {
+              type: 'say_something',
               title: a.title,
-              payload: a.title
+              text: a.text
             }
           } else if (a.action === 'Open URL') {
             return {
+              type: 'open_url',
               title: a.title,
-              url: a.url.replace('BOT_URL', data.BOT_URL)
+              url: a.url && a.url.replace('BOT_URL', data.BOT_URL)
             }
           } else if (a.action === 'Postback') {
             return {
+              type: 'postback',
               title: a.title,
               payload: a.payload
             }

modules/builtin/src/content-types/single_choice.js

@@ -13,7 +13,6 @@ function render(data) {
   return [
     ...events,
     {
-      on: 'webchat',
       text: data.text,
       quick_replies: data.choices.map(c => ({
         title: c.title,