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.
prompt-disabled	`bool`	`false`	`false`	Disables the prompt input and its buttons while the conversation stays readable. A message sent with `sendMessage` is ignored.
prompt-placeholder	`string`	`false`		The hint shown in the empty prompt input. Without it, or when it is empty, the input shows the default hint of the framework.
show-agent	`bool`	`false`	`true`	Shows the agent icon, name and description in the header. The header slot and the buttons stay when it is `false`.
show-new-conversation	`bool`	`false`	`true`	Shows the `New conversation` button in the header. When it is `false`, `StartNewConversation` lets a button of the `header` slot start a new conversation.
show-avatars	`bool`	`false`	`true`	Shows the avatar beside each message of the user and of the agent.
show-elapsed-time	`bool`	`false`	`true`	Shows the time elapsed since the question above the answer being generated. The three animated dots of the answer stay when it is `false`.
content-max-width	`int`	`false`		Maximum width in pixels of the messages, the content at the start of the messages, the prompt and the footer, which are centered. Backgrounds and scrollbar keep the full width.
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.
ref	`IChatbotComponent`	`false`	`null`	The field the chatbot component instance is assigned to. Only a bound value is accepted, the field then exposes `sendMessage` to send a message from a rule.

Sub components

Child node	Description
chatbot-header	Chatbot header
chatbot-footer	Chatbot footer
chatbot-messages-start	Content placed at the start of the messages

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>

Content at the start of the messages

The chatbot-messages-start component places its content at the start of the messages, before the first message, in the same scroll as the messages. It scrolls with them, stays above them once the conversation starts, and is shown alone again after a new conversation.

<chatbot>
    <chatbot-messages-start>
        <text>@Resources.Core.ChatbotGreeting</text>
    </chatbot-messages-start>
</chatbot>

Embedding the chatbot in a custom panel

The header band is only shown when it has something to show: the agent, the New conversation button, the Change agent button, offered once a conversation has started with several agents available, or a chatbot-header content. show-agent="false" and show-new-conversation="false" without chatbot-header therefore hide the whole header band, so that the page around the chatbot provides its own title. show-avatars="false" shows the messages without their avatar.

<chatbot show-agent="false" show-new-conversation="false" show-avatars="false" ref="@Fields.ChatbotInstance">
    <chatbot-messages-start>
        <text>@Resources.Core.ChatbotGreeting</text>
    </chatbot-messages-start>
</chatbot>

content-max-width centers the messages, the content at the start of the messages, the prompt and the footer at a maximum width, for example in a chatbot shown full screen. The conversation and footer backgrounds, as well as the scrollbar, keep the full width of the chatbot.

While the agent prepares its answer, an agent message holds three animated dots until the first text of the answer arrives, and the time elapsed since the question is shown above it. show-elapsed-time="false" hides this elapsed time: with show-avatars="false", only the three dots are shown in the bubble. The dots stay still when the user's system asks for reduced motion.

<chatbot show-agent="false" show-new-conversation="false" show-avatars="false" content-max-width="860" show-elapsed-time="false" ref="@Fields.ChatbotInstance" />

While an answer is written, the conversation follows its bottom, unless the user has scrolled up to read an earlier message. It follows again as soon as the user scrolls back to the bottom.

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" />

Recalling sent messages

In the prompt, the up arrow recalls the messages typed and sent, from the newest to the oldest, and the down arrow goes back to the newer ones, then to the text being typed. In a text being typed or a recalled message that was edited, the arrows first move the cursor to the start or the end of the text. The history is kept while the chatbot is open, even after New conversation, and is lost when the page is reloaded.

Disabling the prompt

The prompt-disabled attribute keeps the conversation readable but prevents the user from writing, sending or attaching anything, and a message sent from code is ignored. It can be bound to a field or computed.

  <chatbot prompt-disabled="@Computeds.IsLocked"></chatbot>

Changing the prompt hint

The prompt-placeholder attribute replaces the hint shown in the empty prompt input. Bind it to a string resource so that the hint follows the language of the user: a constant text is shown as written, whatever the language.

  <chatbot prompt-placeholder="@Resources.Sales.AskAboutAnInvoice"></chatbot>

Hiding the agent in the header

The show-agent attribute set to false removes the agent icon, name and description from the header, for example when the header slot already presents the assistant. The New conversation button stays, see show-new-conversation to remove it.

  <chatbot show-agent="false"></chatbot>

Starting a new conversation from the header

The show-new-conversation attribute set to false removes the New conversation button from the header, for example to replace it with a smaller button of the header slot. That button then calls StartNewConversation on the chatbot field given by ref, which cancels the current answer and clears the messages, as the removed button does.

  <chatbot show-new-conversation="false" ref="@Fields.ChatbotInstance">
      <chatbot-header>
          <button type="method" method-name="RestartConversation" variant="ghost" size="small" icon="Refresh" />
      </chatbot-header>
  </chatbot>

Fields.ChatbotInstance.StartNewConversation();

Sending a message from UI code

The ref attribute assigns the chatbot component instance to a field, so that a code can drive the chatbot. It only accepts a bound value, which must be assignable: binding it to a computed without setter or to a UI view property that is not settable is a template validation error.

  <chatbot ref="@Fields.ChatbotInstance" />

The field ChatbotInstance is of type IChatbotComponent. A code can then send a message as if the user had typed it:

Fields.ChatbotInstance.SendMessage("What is the status of this order?");

ChatbotSendMessageOptions allows the agent and the attachments of the message to be chosen:

Fields.ChatbotInstance.SendMessage(
    new ChatbotSendMessageOptions("Summarize this document.")
        .WithAgentId("DocumentAgent")
        .WithAttachments(Fields.Documents));

When no agent identifier is given, the agent currently selected in the chatbot is used.

PrepareMessage fills the prompt without sending it, so that the user can complete the message before sending it themselves:

Fields.ChatbotInstance.PrepareMessage(
    new ChatbotSendMessageOptions("Summarize this document.")
        .WithAttachments(Fields.Documents));

Table of Contents