feat(misunderstood): add support for all types of messages (#5731)

* feat(misunderstood): add support for all content-types

* v12.26.8 (#5734)

* fix card display and add support for session_reset

* improve CSS and removed unused imports

* small improvements

* removed some temp hack + refactoring

Co-authored-by: Francois-Xavier P. Darveau <955524+EFF@users.noreply.github.com>

modules/misunderstood/package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@blueprintjs/datetime": "3.15.2",
+    "@botpress/messaging-components": "0.0.8",
     "axios": "^0.21.1",
     "bluebird": "^3.7.0",
     "classnames": "^2.2.6",

modules/misunderstood/src/backend/db.ts

@@ -173,6 +173,8 @@ export default class Db {
         const eventObj = typeof event === 'string' ? JSON.parse(event) : event
         return {
           direction: eventObj.direction,
+          type: eventObj.type,
+          payload: eventObj.payload,
           preview: (eventObj.preview || '').replace(/<[^>]*>?/gm, ''),
           payloadMessage: get(eventObj, 'payload.message'),
           isCurrent: id === messageId

modules/misunderstood/src/types.ts

@@ -1,3 +1,5 @@
+import { Content, MessageType } from '@botpress/messaging-components'
+
 export enum FLAGGED_MESSAGE_STATUS {
   new = 'new',
   applied = 'applied',
@@ -38,6 +40,8 @@ export type DbFlaggedEvent = FlaggedEvent & {
 }
 
 export interface ContextMessage {
+  payload: Content<MessageType>
+  type: MessageType
   direction: 'incoming' | 'outgoing'
   preview: string
   payloadMessage: string

modules/misunderstood/src/views/full/MainScreen/ChatPreview.tsx

@@ -1,32 +1,45 @@
+import ReactMessageRenderer, { defaultMessageConfig } from '@botpress/messaging-components'
 import classnames from 'classnames'
 import React from 'react'
 
 import { ContextMessage } from '../../../types'
-import { renderUnsafeHTML } from '../../lite/utils'
 
 import style from './style.scss'
 
 const ChatPreview = ({ messages }: { messages: ContextMessage[] }) => (
   <div className={style.chatPreview}>
-    {messages.map((message, i) => (
-      <div
-        key={i}
-        className={classnames(style.chatPreviewMessage, {
-          [style.chatPreviewMessage_Incoming]: message.direction === 'incoming',
-          [style.chatPreviewMessage_Outgoing]: message.direction === 'outgoing',
-          [style.chatPreviewMessage_Current]: message.isCurrent
-        })}
-      >
-        <div className={style.chatPreviewAvatar}>{message.direction === 'incoming' ? 'U' : 'B'}</div>
-        <div className={style.chatPreviewText}>
+    {messages.map((message, i) => {
+      // TODO: Add translation and move this logic into the @botpress/messaging-components lib
+      if (message.type === 'session_reset') {
+        return <div className={style.chatPreviewMessage_System}>Reset the conversation</div>
+      }
+      const isUserMessage = message.direction === 'incoming'
+      const isBotMessage = message.direction === 'outgoing'
+      const isCardMessage = message.payload.type === 'card'
+
+      return (
+        <div
+          key={i}
+          className={classnames(style.chatPreviewMessage, {
+            [style.chatPreviewMessage_Incoming]: isUserMessage,
+            [style.chatPreviewMessage_Outgoing]: isBotMessage,
+            [style.chatPreviewMessage_Current]: message.isCurrent
+          })}
+        >
+          <div className={style.chatPreviewAvatar}>{isUserMessage ? 'U' : 'B'}</div>
           <div
-            dangerouslySetInnerHTML={{
-              __html: renderUnsafeHTML(message.preview || message.payloadMessage || 'Event(custom)')
-            }}
-          />
+            className={classnames(style.chatPreviewText, {
+              [style.card]: isCardMessage
+            })}
+          >
+            <ReactMessageRenderer
+              content={message.payload}
+              config={{ ...defaultMessageConfig, isBotMessage, isLastGroup: false, isLastOfGroup: false }}
+            />
+          </div>
         </div>
-      </div>
-    ))}
+      )
+    })}
   </div>
 )
 

modules/misunderstood/src/views/full/MainScreen/NewEventView.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonGroup, Intent } from '@blueprintjs/core'
+import { Button, Intent } from '@blueprintjs/core'
 import { AxiosStatic } from 'axios'
 import { lang, ModuleUI } from 'botpress/shared'
 import pick from 'lodash/pick'
@@ -9,7 +9,6 @@ import StickyActionBar from '../StickyActionBar'
 
 import AmendForm from './AmendForm'
 import ChatPreview from './ChatPreview'
-import style from './style.scss'
 
 interface Props {
   axios: AxiosStatic

modules/misunderstood/src/views/full/MainScreen/index.tsx

@@ -1,4 +1,3 @@
-import { AxiosStatic } from 'axios'
 import { lang } from 'botpress/shared'
 import React from 'react'
 

modules/misunderstood/src/views/full/MainScreen/style.scss

@@ -29,7 +29,7 @@
 .chatPreviewMessage {
   display: flex;
   flex-direction: row;
-  max-width: 80%;
+  max-width: 60%;
   padding: 10px;
   margin-bottom: 10px;
 }
@@ -48,9 +48,30 @@
 }
 
 .chatPreviewText {
-  padding: 5px;
-  border-radius: 1px;
+  max-width: 60%;
+  border-radius: 15px;
+  text-align: center;
+  overflow-wrap: break-word;
+  padding: 8px;
   border: 1px solid #ccc;
+
+  &.card {
+    min-width: 60%;
+  }
+
+  p {
+    margin: 0;
+  }
+  img,
+  audio,
+  video {
+    max-width: 100%;
+  }
+}
+
+.chatPreviewMessage_System {
+  text-align: center;
+  color: #676767;
 }
 
 .chatPreviewMessage_Incoming {
@@ -68,7 +89,6 @@
 }
 
 .chatPreviewMessage_Outgoing {
-  align-self: flex-start;
   .chatPreviewAvatar {
     order: 1;
     margin-right: 5px;
@@ -85,7 +105,6 @@
     position: relative;
     background: #db3737;
     border: 1px solid #db3737;
-
     &:before {
       position: absolute;
       content: '';

modules/misunderstood/src/views/full/MainScreen/style.scss.d.ts

@@ -11,6 +11,7 @@ interface CssExports {
   'chatPreviewMessage_Current': string;
   'chatPreviewMessage_Incoming': string;
   'chatPreviewMessage_Outgoing': string;
+  'chatPreviewMessage_System': string;
   'chatPreviewText': string;
   'filter': string;
   'messageTypeBtnGroup': string;