FAQ component

Seamly UI contains a generic component, with matching SASS styling code, for the display of FAQ information in implementations. It is not imported by default in the UI code so that it can optionally be used in custom implementations of the chat interface.

The component

The component can be found in the components folder in a sub folder named faq.

When used in an implementation, the component code will auto subscribe to the event stream from the server and select events containing FAQ information and display those accordingly.

Default functionality

By using the default export from the component code file, it can be used in implementations directly by rendering the component in the JSX of any custom implementation:

<Faq />

Component props

headingText (optional)

A string representing the heading text to render in implementations where the FAQ should have a heading. If no headingText is given, no heading will be rendered.

Important When a headingText is specified, the container element of the component HTML will be a <section> element. When not specified it is wrapped in a <div> element. This is because providing a heading is indicative that the component can exist as an isolated and fully described container.

<Faq headingText="My heading text" />
headingLevel (optional)

When providing the headingText prop, this prop can be used to determine the level of heading element to render. It defaults to an <h2> element, but in order to conserve the heading element hierarchy and semantics it can be adjusted if not nested under an <h1> element.

<Faq headingText="My heading text" headingLevel="3" />

This prop can also consume integer values:

<Faq headingText="My heading text" headingLevel={3} />
showEmptyContainer (optional)

The showEmptyContainer prop takes a boolean or string value. When set to boolean true or given a string of true, the container element of the component will remain rendered even when the FAQ list is empty. This avoids unexpected view changes, especially in implementations where the FAQ list is rendered side by side with the chat window.

<Faq showEmptyContainer="true" />
onFaqClick (optional)

The onFaqClick prop takes an event handler function. This function will be called whenever the user clicks on an FAQ item. The FAQ item object is injected into this function to allow users of the function to access the selected FAQ information.

<Faq
  onFaqClick={faq => {
    // Use FAQ info
  }}
/>

Custom implementations

To support non standard FAQ implementations, the code file also provides two named exports:

The useFaq hook

The useFaq hook contains all the functionality needed to subscribe to the event stream and process FAQs. It also provides an event handler that allows sending a chosen FAQ to the server and render that as a bubble in the chat window.

This hook is helpful in situations where a non standard FAQ view is needed in the implementation OR where code needs to be injected to further process FAQs.

The hooks returns an object with the following keys:

faqs

An array containing the current FAQs to display.

onFaqClickHandler

The onClick event handler to attach to the elements the FAQ texts are rendered into to allow user interaction. Whenever this event handler is triggered it will automatically clear the state array.

The FaqView component

This component contains the standard JSX view of the FAQ component.

By separating it out it can be replaced with a completely new custom implementation.

Component props
faqs (required)

The array of FAQ objects that should be displayed.

onFaqClickHandler (required)

The handler function that should be called whenever a user activates the onClick event of the elements carrying the FAQ texts. These elements should ideally be <button>s.

headingText (optional)

A string representing the heading text to render in implementations where the FAQ should have a heading. If no headingText is given, no heading will be rendered.

Important When a headingText is specified, the container element of the component HTML will be a <section> element. When not specified it is wrapped in a <div> element. This is because providing a heading is indicative that the component can exist as an isolated and fully described container.

headingLevel (optional)

When providing the headingText prop, this prop can be used to determine the level of heading element to render. It defaults to an <h2> element, but in order to conserve the heading element hierarchy and semantics it can be adjusted if not nested under an <h1> element.

<FaqView headingText="My heading text" headingLevel="3" />

This prop can also consume integer values:

<FaqView headingText="My heading text" headingLevel={3} />

####### showEmptyContainer (optional)

The showEmptyContainer prop takes a boolean or string value. When boolean true or given a string of true, the container element of the component will remain rendered even when the FAQ list is empty. This avoids unexpected view changes, especially in implementations where the FAQ list is rendered side by side with the chat window.

Example of a custom implementation.

Whereas the next example is a little bit contrived, it shows how to create a custom component that integrates with the click hander for the FAQ items:

import { h } from 'preact'
import {
  useFaq,
  FaqView,
} from '@seamly/web-ui/src/javascripts/ui/components/faq/faq'

const Faq = () => {
  const { faqs, onFaqClickHandler } = useFaq()

  const onClickHandler = faq => {
    onFaqClickHandler(faq)
    // Do something with the clicked FAQ.
  }

  return <FaqView faqs={faqs} onFaqClickHandler={onClickHandler} />
}

export default Faq

In this way any custom implementation of the FAQ component can be created. In fact, the entire view can be replaced.

The styles

The component ships together with optional SASS stylesthat can be combined with the other SASS files from Seamly UI.

To use it, import it in the implementation's SASS:

@import '[email protected]/web-ui/src/stylesheets/5-components/custom_components/faq';