Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(react): add imagePreviewer property in theme and allow rendering custom components in webchat #2030

Merged
merged 11 commits into from
Dec 22, 2021

Conversation

vanbasten17
Copy link
Contributor

@vanbasten17 vanbasten17 commented Nov 11, 2021

Description

Added the following behaviors in webchat:

  1. If a React component is defined under theme.imagePreviewer, it will be rendered when an image (Image component) within webchat is clicked is clicked. Otherwise, it will behave as before. It is not provided by default by the framework in order to not increase the bundle sizes of all bots.
  2. Allow rendering custom components that will be injected in webchat.

Context

We didn't have a way to add a previewer for images.

Approach taken / Explain the design

Created an external package to be used within this functionality. Example providen below

Screenshot 2021-11-12 at 10 20 58

Desktop:

Screenshot 2021-12-21 at 17 27 14

Mobile:
Screenshot 2021-12-21 at 17 28 02

To document / Usage example

Rendering a custom component with Botonic API:

webchat/index.js

export const webchat = {
  onInit: app => app.open(),
  onOpen: app => {
    app.renderCustomComponent(
      <ImagePreviewer
        isPreviewerOpened={true}
        src={'https://www.scalestatistics.com/uploads/3/0/4/1/30413390/7622723_orig.jpg'}
        closePreviewer={() => Botonic.unmountCustomComponent()} />
    )
  },
}

Defining your custom ImagePreviewer:

import { ImagePreviewer } from '@hubtype/image-previewer'

export const webchat = {
  theme: {
    imagePreviewer: ImagePreviewer
  }
}

Testing

The pull request...

  • has unit tests
  • has integration tests
  • doesn't need tests because... [provide a description]

@vanbasten17 vanbasten17 marked this pull request as ready for review November 12, 2021 09:33
@vanbasten17 vanbasten17 changed the title feat(react): working image preview modal feat(react): image preview modal and opening custom content for modals with Botonic API Nov 12, 2021
@vanbasten17 vanbasten17 force-pushed the feat/image-previews branch 2 times, most recently from 93da22f to 63b638c Compare November 17, 2021 14:06
@vanbasten17 vanbasten17 force-pushed the feat/image-previews branch 2 times, most recently from 9f9e526 to 23a818f Compare December 19, 2021 13:39
@vanbasten17 vanbasten17 force-pushed the feat/image-previews branch 2 times, most recently from 971ad25 to da3da6d Compare December 20, 2021 16:00
@pull-request-size pull-request-size bot added size/M and removed size/L labels Dec 21, 2021
@vanbasten17 vanbasten17 changed the title feat(react): image preview modal and opening custom content for modals with Botonic API feat(react): add imagePreviewer property in theme and allow rendering custom components in webchat Dec 21, 2021
@vanbasten17 vanbasten17 merged commit 967b2aa into master-lts Dec 22, 2021
@vanbasten17 vanbasten17 deleted the feat/image-previews branch December 22, 2021 15:22
vanbasten17 added a commit that referenced this pull request Mar 23, 2023
… custom components in webchat (#2030)

* feat(react): working image preview modal

* feat(react): botonic API to allow open/close modal with custom modal content

* chore(eact): add types for modals

* fix(react): correct styles for large images

* wip: zoom in/zoom out func

* wip: photoswipe working

* chore(react): remove share and full-screen

* wip

* wip(react): setting custom property for imagePreviewer

* feat(react): working previewer feature

* refactor(react): rename names to not be only bind to imagePreviewer and to be generic
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants