chat

experience seamless communication on the go with our chat message component, keeping you connected anytime, anywhere configuration options configuration options some properties are common to all components, see common component properties docid\ llntd rxe8fmh7wpc5czb 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 cons cons iderations the component chat can only be configured in the jig fullscreen docid\ yta vtj4gfh6w2wd xgnb 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 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 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 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 docid\ fymrcytqyyge1k fiifn 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) ai chatbot ai chat jigx (function) provider data provider rest method post \# specify the openai rest api url url https //api openai com/v1/chat/completions \# configure what must be returned (ai response) from the ai server \# response configured in the outputtransform outputtransform | $merge(\[ $merge(\[ $ $eval($ choices\[0] message content), {"messagetime" $tomillis($now())} ]), {"id" $ inputs mid} ]) uselocalcall true \# send input data to the ai server for the ai model to process \# and generate predictions \# configure the ai model to be used \# configure the format in which the response is returned \# configure the prompt sets under content inputtransform | $ { "model" "gpt 3 5 turbo", "response format" { "type" "json object" }, "messages" \[ { "role" "system", "content" "you are the chat for the ai mobile demo app" }, { "role" "system", "content" "you can participate in conversations about the app, and everything related to the app" }, { "role" "system", "content" "your name is ai chatbot" }, { "role" "system", "content" "reply in a casual but formal tone when you participate in conversations " }, { "role" "system", "content" "always respond with a json object in the following format { 'message' 'the response message to the question', 'askedby' 'the user asking the question', 'author' 'the author of the answer', 'question' 'the question asked by the user' }" }, { "role" "system", "content" "the history of the conversation so far is " & history }, { "role" "system", "content" "the provided tid is " & tid }, { "role" "user", "content" question }, { "role" "system", "content" "only reply with the json object as an answer " }, { "role" "system", "content" "the user asking the question is " & user }, { "role" "system", "content" "the author of the response is " & author } ] } \# configure authorization for the ai model \# configure the type for each parameter parameters authorization location header required true type string \# use your own bearer token or the token required by the openai rest value bearer xx question type string location body required true mid type string location body required true author type string location body required true user type string location body required true forrowswithmatchingids true ai chat jigx title ="chat" type jig full screen \# configure the onrefresh to clear/reset the chat \# when the screen is pulled up the screen resets onrefresh type action execute entities options provider data provider local entity aichat method delete goback stay data =@ctx datasources chat history datasources chat history type datasource sqlite options provider data provider local entities \ entity aichat query | select id, json extract(tab data, '$ author') as author, json extract(tab data, '$ askedby') as askedby, json extract(tab data, '$ question') as question, json extract(tab data, '$ message') as message, json extract(tab data, '$ messagetime') as messagetime from \[aichat] as tab order by cast(json extract(tab data, '$ messagetime') as integer) asc component type component chat instanceid mychat options data =@ctx datasources chat history item type component chat message options message =@ctx current item message sender name =@ctx current item author isauthor =$lowercase(@ctx current item author) = $lowercase(@ctx user email) sentat =@ctx current item messagetime \# configure the action to call a global action \# pass the user message/question as a parameter onsend type action execute action options action ai chat action parameters author =@ctx user email user =@ctx user email question =@ctx components mychat state message ai chat action jigx parameters author type string user type string question type string action type action action list options issequential true \# save chat messages to the local data provider on the device actions \ type action execute entity options provider data provider local entity aichat method create goback stay data author =@ctx action parameters author askedby =@ctx action parameters author question =@ctx action parameters question message =@ctx action parameters question messagetime =$tomillis($now()) \# configure an action to call the ai response (outputtransformer) \# called from the rest ai function \ type action sync entities options provider data provider rest entities \ entity aichat function ai chat functionparameters \# provide a name for your chat bot response author 'jigx chatbot' user =@ctx user email \# use your own bearer token or the token required \# by the openai rest authorization bearer question =@ctx action parameters question \# configure a unique id for the chatbot message mid =$uuid()