HowTo: Use the Chat Control associated with a Procedure that calls an Agent

The following sample outlines the steps required to implement an interface that contains a Chat Control whose SendMessageHandlerObject property is set to the name of a Procedure object.

1. Create a Web Panel object and drag a Chat Control to its Web Layout (you could follow the same steps, but using a Panel object generated in Angular).

Note: After dragging and dropping the Chat Control, GeneXus automatically inserts a commented StartChat code block in the Events tab.

//Sub 'StartChat'
//    &chatTranslations = GeneXusUIControls.Chat.TranslationsProvider()
//EndSub

This block is not executed when running the Chat Control. To ensure the Chat Control works correctly, define its initialization in the Start event.

2. Create a Procedure object (for example, called TravelAgencyChatHandler) with the following definition:

Procedure TravelAgencyChatHandler
{
    &messagesUI.FromJson(&httpRequest.ToString()) //&messagesUI is based on the messagesUI SDT and set to collection
    
    //The &messages collection variable is initialized before calling the Agent and sending it as a parameter
    For &messageUI In &messagesUI
        &message = New()
        &message.Content = &messageUI.Content
        &message.Role = ChatRole.Convert(&messageUI.Role)
        &messages.Add(&message)
    EndFor
    
    //The Agent is called
    &chatResult = TravelAgent.Chat(&messages, &callResult)
    
    If &callResult.Success()  //The result of the call is retrieved in chunks
        &messageUI = New()
        Do While &chatResult.HasMoreData()    
            &messageUI.Content = &chatResult.GetMoreData()
            &httpResponse.AddString(&messageUI.ToJson() + Chr(10))
        EndDo
    Else                     //Errors are handled
       &callResultMessages = &callResult.GetMessages()
       &messageUI.content = &callResultMessages.Item(1).Description
       &messageUI.role = GeneXusUIControls.Chat.MessageRole.ERROR
       &httpResponse.AddString(&messageUI.ToJson())
    EndIf

    #Rules
    #End

    #Conditions
    #End

    #Variables
        httpRequest
            [
                DataType = 'HttpRequest'
            ]
        httpResponse
            [
                DataType = 'HttpResponse'
            ]
        callResultMessages
            [
                DataType = 'Messages, GeneXus.Common'
            ]
        messagesUI
            [
                DataType = 'MessageUI, GeneXusUIControls.Chat',
                Collection = 'True'
            ]
        messageUI
            [
                DataType = 'MessageUI, GeneXusUIControls.Chat'
            ]
        callResult
            [
                DataType = 'CallResult, GeneXus.Common'
            ]
        message
            [
                DataType = 'ChatMessage, GeneXus.ArtificialIntelligence'
            ]
        messages
            [
                DataType = 'ChatMessage, GeneXus.ArtificialIntelligence',
                Collection = 'True'
            ]
        chatResult
            [
                DataType = 'ChatResult, GeneXus.ArtificialIntelligence'
            ]
        Today
        Time
            [
                DataType = 'Character(8)'
            ]
        Pgmname
            [
                DataType = 'Character(128)'
            ]
        Pgmdesc
            [
                DataType = 'Character(256)'
            ]
        Page
            [
                DataType = 'Numeric(6.0)'
            ]
        Line
            [
                DataType = 'Numeric(6.0)'
            ]
        Output
            [
                DataType = 'Character(3)'
            ]
    #End

}

You must set the following properties in the Procedure:

• Main program property = True
• Call protocol property = HTTP
• Buffer Response property = Disabled (this ensures that the Procedure can send partial responses progressively to the Chat as they are generated).

3. The Procedure invokes an Agent object (called TravelAgent) that acts as a travel assistant. Create the Agent object as follows:

Agent TravelAgent
{
    You are a travel assistant. Help the user plan trips, suggest destinations, and answer questions about flights and hotels.
    #Rules
         parm(out:&response);
    #End
    #Variables
        response
            [
                DataType = 'Character(100)'
            ]
    #End
}

4. Go to the Web Panel (or Panel) object and set the SendMessageHandlerObject property of the Chat Control to TravelAgentChatHandler (Procedure name). 

5. When you run the application, the conversation interface looks as follows: