feat(components): implement ui components package #208

charlescatta · 2021-10-15T20:03:46Z

This will allow modules like HITL HITL Next and misunderstood to render messages only by having their payload.

The default export of the package is the renderMessage function. Here is an example usage

import React from 'react'
import ReactDOM from 'react-dom'
import { defaultMessageConfig, renderMessage } from '@botpress/messaging-components' 

const Message = renderMessage({
      type: 'text',
      payload: {
        text,
        markdown: false
      },
      config: defaultMessageConfig
    })

ReactDOM.render(<Message />, document.body)

TODOS

Renderer Tests

Other stuff

Add Storybook for monkey testing
Add README

Double check typings by logging payload from channel web renderers:

Future improvements

Add renderer tests for:
- Custom
- QuickReplies
- Dropdown
Switch to Parcel
Extract build configurations like tsconfig and jest
Merge message typings in messaging/server and channel-web
Merge tsconfig of this package into the root one

packages/react-message-renderer/package.json

packages/react-message-renderer/.storybook/main.js

packages/react-message-renderer/.storybook/preview.js

packages/react-message-renderer/README.md

packages/react-message-renderer/babel.config.js

packages/react-message-renderer/jest.config.ts

packages/react-message-renderer/src/renderer/QuickReplies/index.tsx

packages/react-message-renderer/src/renderer/Text/index.tsx

packages/react-message-renderer/src/index.tsx

packages/react-message-renderer/src/typings.d.ts

samuelmasse

What do you think about renaming the folder to components and renaming the package to @botpress/messaging-components?

packages/react-message-renderer/rollup.config.ts

packages/react-message-renderer/tsconfig.json

samuelmasse · 2021-10-18T18:32:55Z

Do this close botpress/botpress#5476?

…210) * Rename folder to components * rename package to @botpress/messaging-components

charlescatta · 2021-10-20T20:52:26Z

I updated the description, this is ready for a first version

laurentlp

Small comments otherwise it looks good to me. Awesome work here 👌

packages/components/src/renderer/FileMessage/index.tsx

packages/components/src/typings.d.ts

EFF

Not Done. But here's the first batch of comments

packages/components/README.md

EFF · 2021-10-26T12:05:26Z

packages/components/jest.config.ts

+  roots: ['.'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+    '.+\\.(css|styl|less|sass|scss)$': 'jest-css-modules-transform'


Not that it changes anything but you're shooting quite large here 🤣

EFF · 2021-10-26T12:13:46Z

packages/components/src/utils.ts

+  }
+}
+
+export function pick<T>(obj: T, keys: Partial<keyof T>[]): Partial<T> {


I imagine you didn't want to import lodash for a reason ?
It's treeShakable if you import by function

It's a simple function and I wanted to keep the bundle size as low as possible

EFF · 2021-10-26T12:14:47Z

packages/components/src/utils.ts

+  return html.replace(/<a href/gi, '<a target="_blank" href')
+}
+
+export class FallthroughIntl implements InjectedIntl {


I didn't want to manage and load translations here but one or two of the renderers calls intl for translation, I just made a dummy class that implements the interface, you can override it in the messageconfig object with your own instance if needed!

EFF · 2021-10-26T12:16:58Z

packages/components/src/index.tsx

+  noMessageBubble: false,
+  intl: new FallthroughIntl(),
+  showTimestamp: false,
+  bp: window.botpress,


I imagine it would be possible for a user to use this library without being on the botpress studio meaning that window.botpress will be undefined.

What happens if it's not set ? do you make heavy use of it ?

this is just for custom components, we do a check and throw an error if it is not defined:

messaging/packages/components/src/renderer/Custom/index.tsx

Line 22 in 3c887a1

const InjectedModuleView = config.bp?.getModuleInjector()

EFF · 2021-10-26T13:28:24Z

packages/components/src/renderer/Carousel/index.tsx

+
+type CardProps = CardPayload & Pick<MessageConfig, 'onSendData'>
+
+export const Card = ({ picture, title, subtitle, buttons, onSendData = async () => {} }: CardProps) => {


Is this the same card as the card component ? if not .. why not ?

When you create a card in botpress you are creating a single card carousel! There is no card renderer in botpress only carousel

Oh, Gotcha !

EFF · 2021-10-26T13:31:44Z

packages/components/src/renderer/Carousel/index.tsx

+              return (
+                <a
+                  href={btn.url}
+                  key={`1-${btn.title}`}


curious about why prefix the keys if you handle all cases one by one as if else ? Any chance of duplicates ?

This is from copy pasting, left it as is, I could hash the payload and use that as a key

packages/components/src/renderer/Custom/ErrorBoundary.tsx

EFF · 2021-10-26T13:34:35Z

packages/components/src/renderer/Custom/index.tsx

+import Keyboard from '../Keyboard'
+import ErrorBoundary from './ErrorBoundary'
+
+const checkError = (moduleInjector: Function, payload: CustomComponentPayload): Error | null => {


Should we unit test this ?

EFF · 2021-10-26T13:41:32Z

packages/components/src/renderer/Custom/index.tsx

+  return null
+}
+
+export const CustomComponentRenderer: React.FC<MessageTypeHandlerProps<'custom'>> = ({ config, payload }) => {


would be nice to have another way of providing custom components ....
Oh wait, can a user override the custom component renderer ?

That's a way of doing it! I plan on improving the Renderer class in the future so that adding a new message type is simpler, it is hard to do well while keeping the types fully checked

Right now you need to add your new type to the messageTypes array and add a default renderer that satisfies MessageTypeHandler<'my_new_message_type'>

samuelmasse · 2021-10-27T22:07:17Z

@charlescatta Is the integration with HITL HITL Next and misunderstood being done simultaneously? Or do we need to merge this PR before doing that?

charlescatta · 2021-10-27T22:09:15Z

we need to merge first

laurentlp · 2021-10-28T16:33:09Z

@samuelmasse What is the reason behind the dependencies changes?

samuelmasse

Alright this PR has been in review for long enough. @charlescatta good job with the package, this should make sharing logic between different uis a lot cleaner. We can merge this right now and start using it internally.

In my opinion it's a waste of time to review something that isn't being used for it's designed purpose. Once this package starts being used for hitl, webchat, misunderstood, etc. we'll have a better view of what needs to be improved.

I fixed some problems with peer depencies. It turns out babel was used somewhere apparently, because yarn was displaying huge amounts of peer dependency warning. I also changed the react version back to 16.8 because most packages we displaying peer-depency errors aswell for version 17.

We'll need other PRs to change the setup of the project a bit as I noted in my comments. Personnally I don't think this is too important for now and either me or @laurentlp can do these changes. What I'd like to see soon is practical usage of this package!

samuelmasse · 2021-10-28T16:19:32Z

packages/components/.storybook/botpress-default.css

@@ -0,0 +1,1089 @@
+/* Old version IE 10 and 11 only */


Where was this copy pasted from. Is the file at the original source still there? We should avoid copy pasted code if possible.

samuelmasse · 2021-10-28T16:19:59Z

.github/workflows/tests.yml

+      # TODO: Merge all tests into root jest config and remove this
+      - name: Run Components tests
+        run: |
+          yarn workspace @botpress/messaging-components test


This can be done in a future PR

samuelmasse · 2021-10-28T16:22:13Z

packages/components/jest.config.ts

+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+    '.+\\.(css|styl|less|sass|scss)$': 'jest-css-modules-transform'


In a future PR this should be moved to the root config. Our test setup isn't very well adjusted for many packages at the moment so we'll see how we do this.

samuelmasse · 2021-10-28T16:22:35Z

packages/components/jest.setup.ts

+import '@testing-library/jest-dom/extend-expect'
+import './src/mocks/matchMedia.mock' // required by react-slick
+
+export default {}


Why a setup and config file?

samuelmasse · 2021-10-28T16:24:13Z

packages/components/package.json

+    "@babel/core": "^7.15.8",
+    "@storybook/addon-essentials": "^6.3.12",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/addon-measure": "^6.4.0-alpha.27",
+    "@storybook/components": "^6.3.12",
+    "@storybook/core-events": "^6.3.12",
+    "@storybook/react": "^6.3.12",


I'm not sure where babel is used but it was disaplying an annoying "unmet peer dependency" message as well as with other packages. There's still some of these messages left. For example fixing the unmet peer dependency "babel-loader" creates another peer dependency that requires us to install webpack...

samuelmasse · 2021-10-28T16:26:26Z

packages/components/rollup.config.ts

+const input = 'src/index.tsx'
+
+const external = [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})]
+
+const plugins = [
+  typescriptPlugin({
+    typescript
+  }),
+  css()
+]


We'll have to see how the development flow goes with this package. Ideally we should be able to have at hot-reloadable ui that uses this package (the webchat for example). I know how to do this with parcel, we'll see if we can do the same with rollup

samuelmasse · 2021-10-28T16:28:46Z

packages/components/src/renderer/Carousel/css/slick-theme.css

+.slick-prev,
+.slick-next {
+  font-size: 0;


What is this file for? What's slick?

samuelmasse · 2021-10-28T16:34:06Z

packages/components/tsconfig.json

+    "outDir": "build",
+    "module": "esnext",
+    "lib": ["dom", "es2017"],
+    "sourceMap": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "target": "es5",
+    "skipLibCheck": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,


This file doesn't follow the format we have for our others tsconfig files. To be fixed in future PR

charlescatta added 2 commits October 15, 2021 13:39

Initial commit

83ba3e4

Add storybook, refactor structure

adda851

charlescatta marked this pull request as draft October 15, 2021 20:03

charlescatta changed the title ~~Cc messaging react components~~ feat(ui): Shared messaging ui library for rendering messages Oct 15, 2021

charlescatta self-assigned this Oct 15, 2021

charlescatta added 2 commits October 15, 2021 17:49

Push WIP

fcba5aa

Push WIP README

464bf70

samuelmasse reviewed Oct 18, 2021

View reviewed changes

packages/react-message-renderer/package.json Outdated Show resolved Hide resolved

laurentlp reviewed Oct 18, 2021

View reviewed changes

charlescatta added 8 commits October 18, 2021 13:43

Remove commented stuff in storybook mainjs

385acf2

Remove extra unsupported type test

f8f46a0

Change dropdown import

a5eee38

Remove useless babel

113d0f2

Clean deps

a322289

Add axios typing

42b055a

Clean jest config

7f766b4

Add gitignore, fix spaces previewjs

a665885

samuelmasse reviewed Oct 18, 2021

View reviewed changes

packages/react-message-renderer/rollup.config.ts Outdated Show resolved Hide resolved

packages/react-message-renderer/tsconfig.json Outdated Show resolved Hide resolved

Fix keyboard typing

2b5e954

charlescatta added 2 commits October 18, 2021 14:34

Code clean LoginPrompt

e0d66c4

Add state typing fileinput

c71ea14

charlescatta mentioned this pull request Oct 18, 2021

feat(channel-web): make common messaging components botpress/botpress#5476

Closed

charlescatta added 7 commits October 18, 2021 14:41

Fix error typing quickreply btn

fc9987c

Update carousel

9daf3df

New line stuff

dbb41fa

remove jsdom pragma

bf39383

chore(components): rename folder to "components" change package name (#…

e362890

…210) * Rename folder to components * rename package to @botpress/messaging-components

Add storybook-static to git ignore

8e0b8ca

Fix typings to reflect channel-web

f7ce4f3

Fix import in readme

b953cfd

charlescatta marked this pull request as ready for review October 20, 2021 20:52

charlescatta requested review from laurentlp and samuelmasse October 20, 2021 20:52

laurentlp reviewed Oct 20, 2021

View reviewed changes

packages/components/src/renderer/FileMessage/index.tsx Outdated Show resolved Hide resolved

packages/components/src/typings.d.ts Outdated Show resolved Hide resolved

charlescatta added 4 commits October 20, 2021 18:51

remove typing OK comments

ee0398c

Add pathname extension fix to FileMsg

4423401

Remove extraneous gitignore

ada4fca

Add tests to CI

3c887a1

EFF reviewed Oct 26, 2021

View reviewed changes

fix deps

8727f2f

samuelmasse changed the title ~~feat(ui): Shared messaging ui library for rendering messages~~ feat(components): implement ui components package Oct 28, 2021

samuelmasse approved these changes Oct 28, 2021

View reviewed changes

charlescatta merged commit a469775 into master Oct 28, 2021

charlescatta deleted the cc_messaging_react_components branch October 28, 2021 17:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(components): implement ui components package #208

feat(components): implement ui components package #208

charlescatta commented Oct 15, 2021 •

edited

Loading

samuelmasse left a comment

samuelmasse commented Oct 18, 2021

charlescatta commented Oct 20, 2021

laurentlp left a comment

EFF left a comment

EFF Oct 26, 2021

EFF Oct 26, 2021

charlescatta Oct 27, 2021

EFF Oct 26, 2021

charlescatta Oct 26, 2021

EFF Oct 26, 2021

charlescatta Oct 26, 2021

EFF Oct 26, 2021

charlescatta Oct 26, 2021 •

edited

Loading

EFF Oct 26, 2021

EFF Oct 26, 2021

charlescatta Oct 26, 2021

EFF Oct 26, 2021

EFF Oct 26, 2021

charlescatta Oct 26, 2021

charlescatta Oct 26, 2021 •

edited

Loading

samuelmasse commented Oct 27, 2021

charlescatta commented Oct 27, 2021

laurentlp commented Oct 28, 2021

samuelmasse left a comment

samuelmasse Oct 28, 2021

samuelmasse Oct 28, 2021

samuelmasse Oct 28, 2021

samuelmasse Oct 28, 2021

samuelmasse Oct 28, 2021

samuelmasse Oct 28, 2021

samuelmasse Oct 28, 2021

samuelmasse Oct 28, 2021


		type CardProps = CardPayload & Pick<MessageConfig, 'onSendData'>

		export const Card = ({ picture, title, subtitle, buttons, onSendData = async () => {} }: CardProps) => {

feat(components): implement ui components package #208

feat(components): implement ui components package #208

Conversation

charlescatta commented Oct 15, 2021 • edited Loading

TODOS

Renderer Tests

Other stuff

Double check typings by logging payload from channel web renderers:

Future improvements

samuelmasse left a comment

Choose a reason for hiding this comment

samuelmasse commented Oct 18, 2021

charlescatta commented Oct 20, 2021

laurentlp left a comment

Choose a reason for hiding this comment

EFF left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

charlescatta Oct 26, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

charlescatta Oct 26, 2021 • edited Loading

Choose a reason for hiding this comment

samuelmasse commented Oct 27, 2021

charlescatta commented Oct 27, 2021

laurentlp commented Oct 28, 2021

samuelmasse left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

charlescatta commented Oct 15, 2021 •

edited

Loading

charlescatta Oct 26, 2021 •

edited

Loading

charlescatta Oct 26, 2021 •

edited

Loading