Components

chat

6min

Experience seamless communication on the go with our chat-message component, keeping you connected anytime, anywhere.

Chat
Chat


Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.



Core Structure



instanceId

Used to reference the message data in the action's expression, for example, =@ctx.components.instanceId.state.message.

data

The array of items you want to display in the chat component.

message

The field property used to add the text message in. Referenced for example, =@ctx.current.item.message

sender

The name property requires the name of the person sending the message and displays at the top of the chat bubble. Expressions can be used to determine the sender, e.g., =@ctx.current.item.senderName

sentAt

Provides the date and time the message was sent at in the format defined by your datasource configuration. For example, 2024-01-08T06:01:29.863Z. If the sentAt property is not configured no date and time shown in the chat bubbles.

onSend

Configure the actions to execute when the send button is tapped in the chat text-editor. The action to send the message data to the database table must be included under onSend; usually, the action: execute-entity with the create method is used.

Other options



isAuthor

Used to visually distinguish between the chat participants. When set to true, the chat bubble is blue, when set to false the bubble is set to white.

onPress

Configure an action that executes when you press on one of the chat bubbles, for example, action.go-to

onRefresh

Use the onRefresh to sync new chat messages to the mobile device by swiping up (⬆️) on the screen as new messages load at the bottom of the screen. The onRefresh is a jig configuration and is not part of the chat component.

Considerations

  • The component.chat can only be configured in the jig.full-screen type.
  • Only text messages can be sent in the chat bubbles.
  • This component provides basic one-on-one chat-messaging, and is designed to perform basic functions.
  • Chat is a chronological list of messages with the most recent ones at the bottom.
  • It is best practice not to configure an actions: code snippet within the jig as the action will overlap the fullscreen functionality. The best practice is not to use an action with the component.chat, as the text field is covered by the action button. The actions should be included in the onSend property under the action: property.
  • Add the base property isHomeButtonVisible: false under the type: property in the jig to remove the home icon from overlapping the chat-send icon.
  • A datasource is required with the following :
    • Core data columns to store the data in the chat component. You can specify the column names that will store the data from these fields :
      • message
      • senderName
      • senderId
  • Optional: To improve performance, limit the number of chat message bubbles displayed on the screen by limiting the number that is returned in the datasource query.

Examples and code snippets 

Chatbot with OpenAI

In this example, you set up an AI chat experience using the Jigx chat component configured to integrate with the OpenAI ChatGPT REST endpoint - https://api.openai.com/v1/chat/completions. The REST API is configured in the ai-function.jigx and the chat component in the ai-chat.jigx file. See OpenAI integration for more examples and information on using OpenAI.

The configuration for the function file called ai-chat.jigx contains:

  1. The URL for the OpenAI REST API for chat.
  2. The outputTransform specifies what to return from the OpenAI REST call.
  3. The inputTransform contains the structure and prompts set that the AI requires, in this instance model, response format, and messages.
  4. The parameters include Authorization, which depends on your AI model; in this example, a Bearer token is used; question, author, and user.

Configure the jig file called ai-chat.jigx with:

  1. onRefresh action - this allows the chat screen to be cleared/reset by deleting the messages.
  2. datasource (local data provider) to return chat history while in the app.
  3. component-chat configured to show the message and sender details.
  4. onSend action executes the global action that pushes the chat message (input) to the local data provider and then a sync-entities action syncs chat with the REST API by executing the function to return the answer (response).
AI chatbot
AI chatbot

ai-chat.jigx (function)
ai-chat.jigx
ai-chat-action.jigx




Updated 29 Aug 2024
Doc contributor
Did this page help you?
Yes
No