chat
Experience seamless communication on the go with our chat-message component, keeping you connected anytime, anywhere.
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. |
- 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.
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:
- The URL for the OpenAI REST API for chat.
- The outputTransform specifies what to return from the OpenAI REST call.
- The inputTransform contains the structure and prompts set that the AI requires, in this instance model, response format, and messages.
- 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:
- onRefresh action - this allows the chat screen to be cleared/reset by deleting the messages.
- datasource (local data provider) to return chat history while in the app.
- component-chat configured to show the message and sender details.
- 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).