@botonic/react 0.36.4 → 0.37.0-alpha.0

package/lib/esm/webchat/session-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"session-view.js","sourceRoot":"","sources":["../../../src/webchat/session-view.jsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"session-view.js","sourceRoot":"","sources":["../../../src/webchat/session-view.jsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botonic/react",
-  "version": "0.36.4",
+  "version": "0.37.0-alpha.0",
   "license": "MIT",
   "description": "Build Chatbots using React",
   "main": "./lib/cjs",

package/src/components/button/index.tsx

@@ -13,7 +13,8 @@ export const Button = (props: ButtonProps) => {
   const { webchatState, openWebview, sendPayload, sendInput, updateMessage } =
     useContext(WebchatContext)
 
-  const autoDisable = webchatState.theme?.button?.autodisable
+  const autoDisable =
+    webchatState.theme?.button?.autodisable || props.autodisable
 
   const handleClick = event => {
     event.preventDefault()

package/src/components/custom-message.tsx

@@ -20,7 +20,7 @@ import { Reply } from './reply'
 
 export interface CustomMessageArgs {
   name: string
-  component: React.ComponentType
+  component: React.FC<any>
   defaultProps?: Record<string, any>
   errorBoundary?: any
 }
@@ -92,15 +92,18 @@ export const customMessage = ({
   }
   WrappedComponent.customTypeName = name
   // eslint-disable-next-line react/display-name
-  WrappedComponent.deserialize = (msg: any) => (
-    <WrappedComponent
-      id={msg.id}
-      key={msg.key}
-      json={msg.data}
-      {...msg.data}
-      sentBy={msg.sentBy || SENDERS.bot}
-      isUnread={msg.isUnread}
-    />
-  )
+  WrappedComponent.deserialize = (msg: any) => {
+    const json = { ...msg.data, messageId: msg.id }
+    return (
+      <WrappedComponent
+        id={msg.id}
+        key={msg.key}
+        json={json}
+        {...msg.data}
+        sentBy={msg.sentBy || SENDERS.bot}
+        isUnread={msg.isUnread}
+      />
+    )
+  }
   return WrappedComponent
 }

package/src/index.ts

@@ -1,6 +1,6 @@
 export { BotonicInputTester, BotonicOutputTester } from './botonic-tester'
 export * from './components'
-export { RequestContext, WebviewRequestContext } from './contexts'
+export * from './contexts'
 export { DevApp } from './dev-app'
 export * from './index-types'
 export { msgsToBotonic, msgToBotonic } from './msg-to-botonic'

package/src/webchat/context/messages-reducer.ts

@@ -1,4 +1,5 @@
 import { SENDERS } from '../../index-types'
+import { isCustom } from '../../message-utils'
 import { WebchatAction } from './actions'
 import { WebchatState } from './types'
 
@@ -100,6 +101,13 @@ function updateMessageReducer(
           props: { ...msgComponent.props, ack: action.payload.ack },
         },
       }
+
+      if (isCustom(action.payload)) {
+        // If the message is a custom message, update the json property to update props.
+        // If user close and open the chat the message will render again with the new props.
+        updatedMsgComponent.props.json = action.payload.data.json
+      }
+
       updatedMessageComponents = {
         messagesComponents: [
           ...state.messagesComponents.slice(0, msgIndex),

package/src/webchat/context/types.ts

@@ -78,7 +78,7 @@ export interface WebchatContextProps {
   updateLatestInput: (input: ClientInput) => void
   updateMessage: (message: WebchatMessage) => void
   updateReplies: (replies: (typeof Reply)[]) => void
-  updateUser: (user: ClientUser) => void
+  updateUser: (user: Partial<ClientUser>) => void
   updateWebchatDevSettings: (settings: WebchatSettingsProps) => void
   trackEvent?: TrackEventFunction
   webchatState: WebchatState

package/src/webchat/custom-messages/index.ts

@@ -0,0 +1 @@
+export { default as CustomRatingMessage } from './rating'

package/src/webchat/custom-messages/rating/icons/face-angry.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { RatingIconProps } from '../types'
+
+export const FaceAngrySvg = ({ color, selected }: RatingIconProps) => {
+  return selected ? (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' color={color}>
+      <path
+        d='M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM338.7 395.9c6.6-5.9 7.1-16 1.2-22.6C323.8 355.4 295.7 336 256 336s-67.8 19.4-83.9 37.3c-5.9 6.6-5.4 16.7 1.2 22.6s16.7 5.4 22.6-1.2c11.7-13 31.6-26.7 60.1-26.7s48.4 13.7 60.1 26.7c5.9 6.6 16 7.1 22.6 1.2zM176.4 272c17.7 0 32-14.3 32-32c0-1.5-.1-3-.3-4.4l10.9 3.6c8.4 2.8 17.4-1.7 20.2-10.1s-1.7-17.4-10.1-20.2l-96-32c-8.4-2.8-17.4 1.7-20.2 10.1s1.7 17.4 10.1 20.2l30.7 10.2c-5.8 5.8-9.3 13.8-9.3 22.6c0 17.7 14.3 32 32 32zm192-32c0-8.9-3.6-17-9.5-22.8l30.2-10.1c8.4-2.8 12.9-11.9 10.1-20.2s-11.9-12.9-20.2-10.1l-96 32c-8.4 2.8-12.9 11.9-10.1 20.2s11.9 12.9 20.2 10.1l11.7-3.9c-.2 1.5-.3 3.1-.3 4.7c0 17.7 14.3 32 32 32s32-14.3 32-32z'
+        fill='currentColor'
+      />
+    </svg>
+  ) : (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' color={color}>
+      <path
+        d='M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm72.4-118.5c9.7-9 10.2-24.2 1.2-33.9C315.3 344.3 290.6 328 256 328s-59.3 16.3-73.5 31.6c-9 9.7-8.5 24.9 1.2 33.9s24.9 8.5 33.9-1.2c7.4-7.9 20-16.4 38.5-16.4s31.1 8.5 38.5 16.4c9 9.7 24.2 10.2 33.9 1.2zM176.4 272c17.7 0 32-14.3 32-32c0-1.5-.1-3-.3-4.4l10.9 3.6c8.4 2.8 17.4-1.7 20.2-10.1s-1.7-17.4-10.1-20.2l-96-32c-8.4-2.8-17.4 1.7-20.2 10.1s1.7 17.4 10.1 20.2l30.7 10.2c-5.8 5.8-9.3 13.8-9.3 22.6c0 17.7 14.3 32 32 32zm192-32c0-8.9-3.6-17-9.5-22.8l30.2-10.1c8.4-2.8 12.9-11.9 10.1-20.2s-11.9-12.9-20.2-10.1l-96 32c-8.4 2.8-12.9 11.9-10.1 20.2s11.9 12.9 20.2 10.1l11.7-3.9c-.2 1.5-.3 3.1-.3 4.7c0 17.7 14.3 32 32 32s32-14.3 32-32z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/webchat/custom-messages/rating/icons/face-frown.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { RatingIconProps } from '../types'
+
+export const FaceFrownSvg = ({ color, selected }: RatingIconProps) => {
+  return selected ? (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' color={color}>
+      <path
+        d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM159.3 388.7c-2.6 8.4-11.6 13.2-20 10.5s-13.2-11.6-10.5-20C145.2 326.1 196.3 288 256 288s110.8 38.1 127.3 91.3c2.6 8.4-2.1 17.4-10.5 20s-17.4-2.1-20-10.5C340.5 349.4 302.1 320 256 320s-84.5 29.4-96.7 68.7zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'
+        fill='currentColor'
+      />
+    </svg>
+  ) : (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' color={color}>
+      <path
+        d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM174.6 384.1c-4.5 12.5-18.2 18.9-30.7 14.4s-18.9-18.2-14.4-30.7C146.9 319.4 198.9 288 256 288s109.1 31.4 126.6 79.9c4.5 12.5-2 26.2-14.4 30.7s-26.2-2-30.7-14.4C328.2 358.5 297.2 336 256 336s-72.2 22.5-81.4 48.1zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/webchat/custom-messages/rating/icons/face-grin-beam.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { RatingIconProps } from '../types'
+
+export const FaceGrinBeamSvg = ({ color, selected }: RatingIconProps) => {
+  return selected ? (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' color={color}>
+      <path
+        d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM388.1 312.8c12.3-3.8 24.3 6.9 19.3 18.7C382.4 390.6 324.2 432 256.3 432s-126.2-41.4-151.1-100.5c-5-11.8 7-22.5 19.3-18.7c39.7 12.2 84.5 19 131.8 19s92.1-6.8 131.8-19zm-170.5-84s0 0 0 0c0 0 0 0 0 0l-.2-.2c-.2-.2-.4-.5-.7-.9c-.6-.8-1.6-2-2.8-3.4c-2.5-2.8-6-6.6-10.2-10.3c-8.8-7.8-18.8-14-27.7-14s-18.9 6.2-27.7 14c-4.2 3.7-7.7 7.5-10.2 10.3c-1.2 1.4-2.2 2.6-2.8 3.4c-.3 .4-.6 .7-.7 .9l-.2 .2c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0c-2.1 2.8-5.7 3.9-8.9 2.8s-5.5-4.1-5.5-7.6c0-17.9 6.7-35.6 16.6-48.8c9.8-13 23.9-23.2 39.4-23.2s29.6 10.2 39.4 23.2c9.9 13.2 16.6 30.9 16.6 48.8c0 3.4-2.2 6.5-5.5 7.6s-6.9 0-8.9-2.8c0 0 0 0 0 0s0 0 0 0zm160 0c0 0 0 0 0 0l-.2-.2c-.2-.2-.4-.5-.7-.9c-.6-.8-1.6-2-2.8-3.4c-2.5-2.8-6-6.6-10.2-10.3c-8.8-7.8-18.8-14-27.7-14s-18.9 6.2-27.7 14c-4.2 3.7-7.7 7.5-10.2 10.3c-1.2 1.4-2.2 2.6-2.8 3.4c-.3 .4-.6 .7-.7 .9l-.2 .2c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0c-2.1 2.8-5.7 3.9-8.9 2.8s-5.5-4.1-5.5-7.6c0-17.9 6.7-35.6 16.6-48.8c9.8-13 23.9-23.2 39.4-23.2s29.6 10.2 39.4 23.2c9.9 13.2 16.6 30.9 16.6 48.8c0 3.4-2.2 6.5-5.5 7.6s-6.9 0-8.9-2.8c0 0 0 0 0 0s0 0 0 0s0 0 0 0z'
+        fill='currentColor'
+      />
+    </svg>
+  ) : (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' color={color}>
+      <path
+        d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm349.5 52.4c18.7-4.4 35.9 12 25.5 28.1C350.4 374.6 306.3 400 255.9 400s-94.5-25.4-119.1-63.5c-10.4-16.1 6.8-32.5 25.5-28.1c28.9 6.8 60.5 10.5 93.6 10.5s64.7-3.7 93.6-10.5zM217.6 228.8s0 0 0 0c0 0 0 0 0 0l-.2-.2c-.2-.2-.4-.5-.7-.9c-.6-.8-1.6-2-2.8-3.4c-2.5-2.8-6-6.6-10.2-10.3c-8.8-7.8-18.8-14-27.7-14s-18.9 6.2-27.7 14c-4.2 3.7-7.7 7.5-10.2 10.3c-1.2 1.4-2.2 2.6-2.8 3.4c-.3 .4-.6 .7-.7 .9l-.2 .2c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0c-2.1 2.8-5.7 3.9-8.9 2.8s-5.5-4.1-5.5-7.6c0-17.9 6.7-35.6 16.6-48.8c9.8-13 23.9-23.2 39.4-23.2s29.6 10.2 39.4 23.2c9.9 13.2 16.6 30.9 16.6 48.8c0 3.4-2.2 6.5-5.5 7.6s-6.9 0-8.9-2.8c0 0 0 0 0 0s0 0 0 0zm160 0c0 0 0 0 0 0l-.2-.2c-.2-.2-.4-.5-.7-.9c-.6-.8-1.6-2-2.8-3.4c-2.5-2.8-6-6.6-10.2-10.3c-8.8-7.8-18.8-14-27.7-14s-18.9 6.2-27.7 14c-4.2 3.7-7.7 7.5-10.2 10.3c-1.2 1.4-2.2 2.6-2.8 3.4c-.3 .4-.6 .7-.7 .9l-.2 .2c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0c-2.1 2.8-5.7 3.9-8.9 2.8s-5.5-4.1-5.5-7.6c0-17.9 6.7-35.6 16.6-48.8c9.8-13 23.9-23.2 39.4-23.2s29.6 10.2 39.4 23.2c9.9 13.2 16.6 30.9 16.6 48.8c0 3.4-2.2 6.5-5.5 7.6s-6.9 0-8.9-2.8c0 0 0 0 0 0s0 0 0 0s0 0 0 0z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/webchat/custom-messages/rating/icons/face-meh.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { RatingIconProps } from '../types'
+
+export const FaceMehSvg = ({ color, selected }: RatingIconProps) => {
+  return selected ? (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' color={color}>
+      <path
+        d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM176.4 176a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm128 32a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM160 336l192 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z'
+        fill='currentColor'
+      />
+    </svg>
+  ) : (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' color={color}>
+      <path
+        d='M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM176.4 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm192-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM184 328c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/webchat/custom-messages/rating/icons/face-smile.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { RatingIconProps } from '../types'
+
+export const FaceSmileSvg = ({ color, selected }: RatingIconProps) => {
+  return selected ? (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' color={color}>
+      <path
+        d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM164.1 325.5C182 346.2 212.6 368 256 368s74-21.8 91.9-42.5c5.8-6.7 15.9-7.4 22.6-1.6s7.4 15.9 1.6 22.6C349.8 372.1 311.1 400 256 400s-93.8-27.9-116.1-53.5c-5.8-6.7-5.1-16.8 1.6-22.6s16.8-5.1 22.6 1.6zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'
+        fill='currentColor'
+      />
+    </svg>
+  ) : (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' color={color}>
+      <path
+        d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm177.6 62.1C192.8 334.5 218.8 352 256 352s63.2-17.5 78.4-33.9c9-9.7 24.2-10.4 33.9-1.4s10.4 24.2 1.4 33.9c-22 23.8-60 49.4-113.6 49.4s-91.7-25.5-113.6-49.4c-9-9.7-8.4-24.9 1.4-33.9s24.9-8.4 33.9 1.4zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/webchat/custom-messages/rating/icons/index.ts

@@ -0,0 +1,6 @@
+export * from './face-angry'
+export * from './face-frown'
+export * from './face-grin-beam'
+export * from './face-meh'
+export * from './face-smile'
+export * from './star'

package/src/webchat/custom-messages/rating/icons/star.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { RatingIconProps } from '../types'
+
+export const StarSvg = ({ color, selected }: RatingIconProps) => {
+  return selected ? (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' color={color}>
+      <path
+        d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'
+        fill='currentColor'
+      />
+    </svg>
+  ) : (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' color={color}>
+      <path
+        d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/webchat/custom-messages/rating/index.tsx

@@ -0,0 +1,91 @@
+import { INPUT, InputType } from '@botonic/core'
+import React, { useContext, useState } from 'react'
+import { ThemeContext } from 'styled-components'
+
+import { Button, customMessage } from '../../../components'
+import { WebchatContext } from '../../context'
+import { RatingSelector } from './rating-selector'
+import { MessageBubble } from './styles'
+import { RatingType } from './types'
+
+interface CustomRatingMessageProps {
+  payloads: string[]
+  messageText: string
+  buttonText: string
+  ratingType: RatingType
+  json: { messageId?: string; valueSent?: number }
+}
+
+const CustomRatingMessage: React.FC<CustomRatingMessageProps> = props => {
+  const { payloads, messageText, buttonText, ratingType } = props
+  const { webchatState, updateMessage, sendInput } = useContext(WebchatContext)
+
+  const theme = useContext(ThemeContext)
+  const color = theme?.brand?.color ?? ''
+
+  const [ratingValue, setRatingValue] = useState(
+    props.json?.valueSent ? props.json.valueSent : -1
+  )
+  const [showRating, setShowRating] = useState(true)
+
+  const ratingChanged = (newRating: number) => {
+    setRatingValue(newRating)
+  }
+
+  const updateMessageJSON = (messageId?: string) => {
+    if (messageId) {
+      const messageToUpdate = webchatState.messagesJSON.filter(m => {
+        return m.id === messageId
+      })[0]
+      messageToUpdate.data.json.valueSent = ratingValue
+      updateMessage(messageToUpdate)
+    }
+  }
+
+  const handleButtonSend = () => {
+    if (ratingValue !== -1) {
+      setShowRating(false)
+
+      const payload = payloads[ratingValue - 1]
+
+      updateMessageJSON(props.json?.messageId)
+
+      const input = {
+        type: INPUT.POSTBACK as InputType,
+        payload,
+      }
+      void sendInput(input)
+    }
+  }
+
+  const disabled = ratingValue === -1
+
+  return (
+    <div className='rating-message-container'>
+      <MessageBubble className='rating-message-bubble'>
+        {messageText}
+        <RatingSelector
+          color={color}
+          onRatingChange={ratingChanged}
+          ratingValue={ratingValue}
+          ratingType={ratingType}
+          valueSent={props.json?.valueSent}
+        />
+      </MessageBubble>
+      {!props.json?.valueSent && showRating && (
+        <Button
+          autodisable={true}
+          disabled={disabled}
+          onClick={handleButtonSend}
+        >
+          {buttonText}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export default customMessage({
+  name: 'custom-rating',
+  component: CustomRatingMessage,
+})

package/src/webchat/custom-messages/rating/rating-selector.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react'
+
+import { Smileys } from './smileys'
+import { Stars } from './stars'
+import { RatingSelectorContainer } from './styles'
+import { RatingType } from './types'
+
+const NUMBER_OF_RATING_BUTTONS = 5
+interface RatingSelectorProps {
+  color: string
+  isSent?: boolean
+  onRatingChange: (newRating: number) => void
+  ratingValue: number
+  ratingType: RatingType
+  valueSent?: number
+}
+
+export const RatingSelector = ({
+  color,
+  isSent,
+  onRatingChange,
+  ratingValue,
+  ratingType,
+  valueSent,
+}: RatingSelectorProps) => {
+  const [hover, setHover] = useState<number>(valueSent ? valueSent : -1)
+
+  const onHover = (ratingNumber: number) => {
+    if (!valueSent) setHover(ratingNumber)
+  }
+
+  return (
+    <RatingSelectorContainer isSent={isSent}>
+      {Array.from({ length: NUMBER_OF_RATING_BUTTONS }, (_star, i) => {
+        const ratingNumber = i + 1
+
+        return (
+          <div
+            key={i}
+            onMouseEnter={() => onHover(ratingNumber)}
+            onMouseLeave={() => onHover(ratingValue)}
+            onClick={() => onRatingChange(ratingNumber)}
+          >
+            {ratingType === RatingType.Stars && (
+              <Stars color={color} ratingNumber={ratingNumber} hover={hover} />
+            )}
+            {ratingType === RatingType.Smileys && (
+              <Smileys
+                color={color}
+                ratingNumber={ratingNumber}
+                hover={hover}
+              />
+            )}
+          </div>
+        )
+      })}
+    </RatingSelectorContainer>
+  )
+}

package/src/webchat/custom-messages/rating/smileys.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import {
+  FaceAngrySvg,
+  FaceFrownSvg,
+  FaceGrinBeamSvg,
+  FaceMehSvg,
+  FaceSmileSvg,
+} from './icons'
+import { RatingItemProps } from './types'
+
+const SMILEY_MAP = {
+  1: FaceFrownSvg,
+  2: FaceAngrySvg,
+  3: FaceMehSvg,
+  4: FaceSmileSvg,
+  5: FaceGrinBeamSvg,
+} as const
+
+export const Smileys = ({ color, ratingNumber, hover }: RatingItemProps) => {
+  const isSelected = hover === ratingNumber
+  const SmileyComponent = SMILEY_MAP[ratingNumber as keyof typeof SMILEY_MAP]
+
+  return SmileyComponent ? (
+    <SmileyComponent color={color} selected={isSelected} />
+  ) : null
+}

package/src/webchat/custom-messages/rating/stars.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import { StarSvg } from './icons/index'
+import { RatingItemProps } from './types'
+
+export const Stars = ({ color, ratingNumber, hover }: RatingItemProps) => {
+  const isSelected = hover >= ratingNumber
+  return <StarSvg color={color} selected={isSelected} />
+}

package/src/webchat/custom-messages/rating/styles.ts

@@ -0,0 +1,26 @@
+import styled from 'styled-components'
+
+// TODO: Review how define all this styles
+export const MessageBubble = styled.div`
+  margin: 0px 0px 5px 0px;
+`
+
+interface RatingSelectorContainerProps {
+  isSent?: boolean
+}
+
+export const RatingSelectorContainer = styled.div<RatingSelectorContainerProps>`
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 16px;
+
+  & > div {
+    cursor: ${props => (props.isSent ? 'default' : 'pointer')};
+
+    svg {
+      height: 27px;
+      width: 27px;
+    }
+  }
+`

package/src/webchat/custom-messages/rating/types.ts

@@ -0,0 +1,15 @@
+export enum RatingType {
+  Stars = 'stars',
+  Smileys = 'smileys',
+}
+
+export interface RatingItemProps {
+  color: string
+  ratingNumber: number
+  hover: number
+}
+
+export interface RatingIconProps {
+  color: string
+  selected?: boolean
+}

package/src/webchat/index.ts

@@ -1,5 +1,6 @@
 // @ts-nocheck
 export { WebchatContext } from './context'
+export * from './custom-messages'
 export { Webchat } from './webchat'
 export { WebchatDev } from './webchat-dev'
 

package/src/webchat/input-panel/send-button.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 
 import SendButtonIcon from '../../assets/send-button.svg'
-import { ROLES, WEBCHAT } from '../../constants'
+import { ROLES } from '../../constants'
 import { WebchatContext } from '../../webchat/context'
 import { Icon } from '../components/common'
 import { ConditionalAnimation } from '../components/conditional-animation'

package/src/webchat/session-view.jsx

@@ -127,14 +127,6 @@ export const SessionView = props => {
           }
         />
         <SessionViewAttribute label='PAYLOAD:' value={input.payload} />
-        <SessionViewAttribute
-          label='INTENT:'
-          value={
-            input.intent
-              ? `${input.intent} (${(input.confidence * 100).toFixed(1)}%)`
-              : ''
-          }
-        />
         <SessionViewAttribute
           label='PATH:'
           value={lastRoutePath ? `/${lastRoutePath}` : '/'}