IBM Embedded Business AI Framework

Learn

Integrate

Help

Front End Assets

Overview

EBA UI is implemented using React.js as the foundation library. Official React.js documentation can be found here. All data snippets you can see in the conversation, content or graph areas are implemented using corresponding React.js components.

We use auto discovery for data visualization components: give your component a name following the following convention: <concept namespace>_<concept name><suffix> where suffix can be one of:

Note that you likely want to use multiple suffix types for the same concept. For example, if you are rendering data for weather, you will likely want to show this both within the chat panel as well as the content panel. A concise, largely textual representation of the weather can be provided within weather_WeatherData, while a larger, graphical representation will be provided within weather_WeatherContent.

The following properties will be given to your component in @props:

Under any circumstances UI component must not modify data passed through @props.

As a cautionary note, it is important to understand that the UI components of all agents are gathered and run in the same browser environment. Consequently, we encourage developers to employ the appropriate namespacing for their components and to implement their assets strictly to visualize their own data. The rule here is that developers should respect other components and styles within the system so as to prevent any interference.

Render Environment

The following packages are available out of the box for front-end assets and can be used within your front end asset codes.

CSS packages

Javascript packages

Core

Util

Internationalization

Graphs, charts, editors, and more

Global Functions and Objects

Global Functions

EBA provides global functions for rendering primitive data types which are available for frontend assets. A subset of common used functions are listed here:

Note: renderDate can work with Javascript Dates, Numbers, and Strings and, in the case the input is a number, we expect its value to be in terms of seconds. Note: Locale is taken from browser, and defaults to en-us.

Global Objects

EBA provides a set of global objects which are available for frontend assets.

Native UI Components

Our team provides users with a few pre-built and configurable react components that are generic across any application domain. We intend the detail these components and their usage within this document.

In particular, we support the following components:

Message formatting

EBA provides a few convenience mechanisms for formatting NL messages:

edit this article