Custom message components

To allow the Seamly UI to cater for a wider range of user requested features and UI designs, it is possible to override a number of the Preact components used internally in the Seamly implementation or even extend some component collections.

Overview

Custom component implementations can be injected into Seamly via the init configuration.

The full set of custom components that be set in the configuration is:

customComponents: {
    view: <CustomViewComponent>,
    entry: {
        text: <CustomTextEntryComponent>,
        upload: <CustomUploadEntryComponent>
    }
    message: {
        'choice_prompt': <CustomChoicePromptComponent>,
        text: <CustomTextComponent>,
        image: <CustomImageComponent>,
        video: <CustomVideoComponent>,
        upload: <CustomUploadComponent>,
        custom: {
          // Collection of components for custom message events.
        }
    },
    info: {
        text: <CustomInfoTextComponent>,
        divider: <CustomDividerComponent>,
        translation: <CustomTranslationComponent>,
        timeIndicator: <CustomTimeIndicatorComponent>,
    },
    participant: {
        participant: <CustomParticipantComponent>,
  },
}

When overriding existing components it is important to fully implement the interface of the existing component in the custom implementation and only then deviate from standard functionality in terms of rendering. Failing to do so will lead to errors. Where possible, Hooks are exported to minimize copy and paste of JavaScript code.

Type of components

`view`

This component will render the full Seamly UI and can be used to re-order or replace framing or sectional components of the main Seamly UI view.

`entry`

This allows loading different implementations of the entry components used in the entry bar at the bottom of the application.

text: Overrides the single line text input entry component.
upload: Overrides the file upload input entry component.

It is up to the developer to properly implement these overrides. These components are functionality rich and incomplete implementation of the full API and function as presented in the Seamly Web UI code base may lead to application failure.

`message`

This is a set of components used to render the various message type events sent from the Seamly server.

choice_prompt: Overrides the standard rendering implementation of the choice_prompt subtype of the message event.
text: Overrides the standard rendering implementation of the text subtype of the message event.
splash: Overrides the standard rendering implementation of the splash subtype of the message event.
image: Overrides the standard rendering implementation of the image subtype of the message event.
video: Overrides the standard rendering implementation of the video subtype of the message event.
upload: Overrides the standard rendering implementation of the upload subtype of the message event.
custom: The custom message subtype can contain any number of implementation specific custom events. This collection of custom components can be used to provide rendering components to these events.

Failing to provide a rendering component for a custom message event will mean falling back to the standard text component in the Seamly UI.

For example, if custom message events awesome_offer and notice have been configured the custom field can be configured as:

custom: {
    'awesome_offer': <AwesomeOfferComponent>,
    notice: <NoticeComponent>
}

`info`

This is a set of components used to render the various info type events sent from the Seamly server.

text: Overrides the standard rendering implementation of the text subtype of the info event.
divider: Overrides the standard rendering implementation of the divider subtype of the info event.
translation: Overrides the standard rendering implementation of the text subtype of the translation event.

`participant`

This is a set of components used to render the various info type events sent from the Seamly server.

participant: Overrides the standard rendering implementation of the participant subtype of the participant event.