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 thechoice_prompt
subtype of themessage
event.text
: Overrides the standard rendering implementation of thetext
subtype of themessage
event.splash
: Overrides the standard rendering implementation of thesplash
subtype of themessage
event.image
: Overrides the standard rendering implementation of theimage
subtype of themessage
event.video
: Overrides the standard rendering implementation of thevideo
subtype of themessage
event.upload
: Overrides the standard rendering implementation of theupload
subtype of themessage
event.custom
: Thecustom
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 thetext
subtype of theinfo
event.divider
: Overrides the standard rendering implementation of thedivider
subtype of theinfo
event.translation
: Overrides the standard rendering implementation of thetext
subtype of thetranslation
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 theparticipant
subtype of theparticipant
event.