Chatbot

Chatbot is a component that allows you to display a chatbot in your application using artificial intelligence.

Node name : chatbot

Attributes

Attribute	Type	Required	Default value	Description
speech	`bool`	`false`	`false`	Show a microphone so the user can speak instead of typing their questions.
additional-context	`IDictionary<string, object>`	`false`	`{}`	Additional context to send to the chatbot. Ce context peut être utilisé pour construire le prompt système avec le formatage handlebars
agent-ids	`string`, `string[]`	`false`	`[]`	The ID or IDs of the agents available in the chatbot. If not provided, all visible agents are available.
selected-agent-id	`string`	`false`	`null`	The ID of the agent to use. If not provided, no agent is selected if more than one agent exists. This attribute supports bidirectional binding mode.
initial-question	`string`	`false`	`null`	The user's question to initialize the input. The question is not sent. The existing question is only modified when the conversation has not yet started.
prompt-max-rows	`int`	`false`	`10`	The maximum number of visible rows in the prompt input.
answer-in-progress	`bool`	`false`	`false`	Indicates whether the chatbot is currently processing an answer. This attribute supports bidirectional binding mode, when the value is set to false the current chatbot request is canceled.

Sub components

Child node	Description
chatbot-header	Chatbot header
chatbot-footer	Chatbot footer

Examples

Basic

A simple chatbot with speech enabled.

  <chatbot></chatbot>

To customize the header of the chatbot, you can use the chatbot-header component and add any component you want.

<chatbot>
    <chatbot-header>
        <horizontal-layout>
            <image name="AI"/>
            <heading level="4">
                @Resources.Core.ChatbotTitle
            </heading>
        </horizontal-layout>
    </chatbot-header>
</chatbot>

To customize the footer of the chatbot, you can use the chatbot-footer component and add any component you want.

<chatbot>
    <chatbot-footer>
      <horizontal-layout>
          <image name="warning" size="small"/>
          <text size="small">@Resources.Core.ChatbotWarning</text>
      </horizontal-layout>
    </chatbot-footer>
</chatbot>

Additional context

A chatbot with speech disabled and additional context.

  <chatbot speech="false" additional-context="{ 'user': 'John' }"></chatbot>

You can also bind the additionalContext attribute to a field or computed.

  <chatbot additional-context="@Computeds.ChatbotContext"></chatbot>

The computed ChatbotContext can be defined as follows:

Type: System.Collections.Generic.Dictionary<string, object?>
Getter :

var values = new Dictionary<string, object?>();
if (Fields.SelectedTabIndex >= 0 && Fields.SelectedTabIndex < Fields.Frames.Count)
{
    // Get the current frame
    IFrame frame = Fields.Frames[Fields.SelectedTabIndex];
    if (frame.ViewModel?.DatasourceCurrent != null )
    {
        // if the current frame is an order, we add the customer name to the context
        OrderUI? orderUI = frame.ViewModel?.DatasourceCurrent as OrderUI;
        if (orderUI?.CustomerName != null)
        {
            values["CustomerName"] = orderUI.CustomerName;
        }
    }
}

return values;

In this example, the chatbot component is used in a UI view that contains a FrameContainer component defined like this:

<frames-container frames="@Fields.Frames" selected-tab-index="Fields.SelectedTabIndex" />

Table of Contents