(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

DynamicChatComponent User Manual

The DynamicChatComponent is an interactive chat interface for dynamic applications. It supports user and bot messages, custom rating icons, and event-driven actions. This manual describes all configurable properties, grouped by category, with examples.

General Properties

  • id
    Specifies the unique identifier for the component. Used for referencing and programmatic access.
    Example: "customerSupportChat"

  • displayName
    Sets the display name of the component, shown in the structure panel for easy identification.
    Example: "Support Chat"

Visual Properties

  • botMessageRatingIcons
    Configures the set of icons displayed for rating bot messages. Each icon can have its own tooltip, click behavior, and alternate icon for toggling.
    Example:
  [
    {
      "name": "thumbs-up",
      "tooltipTranslations": { "en-US": "Helpful", "de-DE": "Hilfreich" },
      "alternateIcon": "thumbs-up-filled",
      "isClickableOnce": true,
      "events": [/* ... */]
    }
  ]

  • maxMessageLength
    Sets the maximum number of characters allowed in a user message. Controls input length and prevents excessively long messages.
    Example: 500

  • paddingClass
    Configures the padding for the chat component using CSS classes.
    Example: "p-3"

Data Source Properties

  • events
    Defines the list of event actions the component can trigger. These events allow integration with dynamic actions, such as sending messages or handling content clicks.
    Example:
  [
    { "type": "ON_SEND_MESSAGE", "actions": [/* ... */] },
    { "type": "ON_CONTENT_CLICK", "actions": [/* ... */] }
  ]

Authorization

  • visibilityPolicySetId
    Determines the visibility of the component based on a policy set. Restricts access to certain users or roles.
    Example: "supportAgentsOnly"

Testing Hooks

  • dataTestId
    Sets the testing hook ID for automated testing. Makes it easier to select the component in end-to-end or unit tests.
    Example: "support-chat-component"

Event Actions

  • ON_SEND_MESSAGE
    Triggered when a user sends a message. Can be used to invoke backend APIs or trigger workflows.

  • ON_CONTENT_CLICK
    Triggered when a user clicks on content within a message. Useful for handling links or interactive elements.

  • ON_ICON_CLICK
    Triggered when a bot message rating icon is clicked. Allows for custom feedback handling or analytics.

Example Configuration

{
  "id": "supportChat",
  "displayName": "Support Chat",
  "botMessageRatingIcons": [
    {
      "name": "thumbs-up",
      "tooltipTranslations": { "en-US": "Helpful" },
      "alternateIcon": "thumbs-up-filled",
      "isClickableOnce": true,
      "events": [{ "type": "ON_ICON_CLICK", "actions": [] }]
    }
  ],
  "maxMessageLength": 500,
  "events": [
    { "type": "ON_SEND_MESSAGE", "actions": [] },
    { "type": "ON_CONTENT_CLICK", "actions": [] }
  ],
  "dataTestId": "support-chat-component"
}

Data Documentation

The component manages an array of chat messages, each with properties such as type (user or bot), content, and timestamp.
Example message:

{
  "type": "user",
  "question": "How can I reset my password?",
  "timestamp": 1697800000000
}

Summary

DynamicChatComponent provides a flexible chat interface with customizable visual elements, event-driven actions, and support for testing and authorization. By configuring its properties, you can tailor the chat experience to fit a wide range of application needs.

  • No labels