twilio-conversations-retool-app.json

{"uuid":"b680381a-66d5-11ed-82a8-4bb41959d8ca","page":{"id":107962258,"data":{"appState":"[\"~#iR\",[\"^ \",\"n\",\"appTemplate\",\"v\",[\"^ \",\"isFetching\",false,\"plugins\",[\"~#iOM\",[\"emojiPickerVisibility\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"emojiPickerVisibility\",\"type\",\"state\",\"subtype\",\"State\",\"namespace\",null,\"resourceName\",null,\"resourceDisplayName\",null,\"template\",[\"^3\",[\"_persistedValueGetter\",null,\"_persistedValueSetter\",null,\"persistValue\",false,\"persistedValueKey\",\"\",\"value\",\"true\"]],\"style\",null,\"position2\",null,\"mobilePosition2\",null,\"mobileAppPosition\",null,\"tabIndex\",null,\"container\",\"\",\"createdAt\",\"~m1663001600255\",\"updatedAt\",\"~m1663001616709\",\"folder\",\"tempState\",\"screen\",null]]],\"listenForModelUpdates\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"listenForModelUpdates\",\"^4\",\"datasource\",\"^5\",\"SqlTransformQuery\",\"^6\",null,\"^7\",\"SQL Transforms\",\"^8\",null,\"^9\",[\"^3\",[\"queryRefreshTime\",\"\",\"lastReceivedFromResourceAt\",null,\"queryDisabledMessage\",\"\",\"successMessage\",\"\",\"queryDisabled\",\"\",\"playgroundQuerySaveId\",\"latest\",\"resourceNameOverride\",\"\",\"runWhenModelUpdates\",true,\"showFailureToaster\",true,\"query\",\"-- Listen for updates to the inbound key on the webSocketCustomComponent model to trigger event handlers\\nselect\\n  *\\nfrom\\n  {{ twilioConversationsCustomComponent.model.inbound }}\",\"playgroundQueryUuid\",\"\",\"playgroundQueryId\",null,\"error\",null,\"privateParams\",[\"~#iL\",[]],\"runWhenPageLoadsDelay\",\"\",\"data\",null,\"importedQueryInputs\",[\"^3\",[]],\"isImported\",false,\"showSuccessToaster\",true,\"cacheKeyTtl\",\"\",\"metadata\",null,\"changesetObject\",\"\",\"errorTransformer\",\"// The variable 'data' allows you to reference the request's data in the transformer. \\n// example: return data.find(element => element.isError)\\nreturn data.error\",\"confirmationMessage\",null,\"isFetching\",false,\"changeset\",\"\",\"rawData\",null,\"queryTriggerDelay\",\"0\",\"resourceTypeOverride\",\"\",\"watchedParams\",[\"^D\",[]],\"enableErrorTransformer\",false,\"showLatestVersionUpdatedWarning\",false,\"timestamp\",0,\"importedQueryDefaults\",[\"^3\",[]],\"enableTransformer\",false,\"showUpdateSetValueDynamicallyToggle\",true,\"runWhenPageLoads\",false,\"transformer\",\"// type your code here\\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\\nreturn data\",\"events\",[\"^D\",[[\"^3\",[\"event\",\"success\",\"type\",\"datasource\",\"method\",\"trigger\",\"pluginId\",\"addInboundToHistory\",\"targetId\",null,\"params\",[\"^3\",[]],\"waitType\",\"debounce\",\"waitMs\",\"0\"]]]],\"queryTimeout\",\"10000\",\"requireConfirmation\",false,\"queryFailureConditions\",\"\",\"changesetIsObject\",false,\"enableCaching\",false,\"allowedGroups\",[\"^D\",[]],\"queryThrottleTime\",\"750\",\"updateSetValueDynamically\",false,\"notificationDuration\",\"\"]],\"^:\",null,\"^;\",null,\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1662589775927\",\"^A\",\"~m1663102965847\",\"^B\",\"js\",\"^C\",null]]],\"addOutboundToHistory\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"addOutboundToHistory\",\"^4\",\"datasource\",\"^5\",\"JavascriptQuery\",\"^6\",null,\"^7\",\"JavascriptQuery\",\"^8\",null,\"^9\",[\"^3\",[\"queryRefreshTime\",\"\",\"lastReceivedFromResourceAt\",null,\"queryDisabledMessage\",\"\",\"successMessage\",\"\",\"queryDisabled\",\"{{!addParticipant.data}}\",\"playgroundQuerySaveId\",\"latest\",\"resourceNameOverride\",\"\",\"runWhenModelUpdates\",false,\"showFailureToaster\",false,\"query\",\"// Usage: Processes outbound messages and pushes them to the twilioConversationsCustomComponent\\n// Triggered by: Submit event handler on messageInput\\n\\nconst outboundMessage = messageInput.value;\\n\\n// Push the outbound message to the Conversations custom component\\ntwilioConversationsCustomComponent.updateModel({ outbound: outboundMessage });\\n\\n// Get current state of message history\\nconst history = messageHistory.value;\\n\\n// Append the outbound message to history\\nconst payload = { message: outboundMessage, direction: \\\"outbound\\\" };\\nhistory.push(payload);\\n\\n// Save updated history to temp state\\nmessageHistory.setValue(history);\\n\\n// Clear the messageInput component for the next message\\nmessageInput.clearValue();\\n\",\"playgroundQueryUuid\",\"\",\"playgroundQueryId\",null,\"error\",null,\"privateParams\",[\"^D\",[]],\"runWhenPageLoadsDelay\",\"\",\"data\",null,\"importedQueryInputs\",[\"^3\",[]],\"isImported\",false,\"showSuccessToaster\",false,\"cacheKeyTtl\",\"\",\"metadata\",null,\"changesetObject\",\"\",\"errorTransformer\",\"// The variable 'data' allows you to reference the request's data in the transformer. \\n// example: return data.find(element => element.isError)\\nreturn data.error\",\"confirmationMessage\",null,\"isFetching\",false,\"changeset\",\"\",\"rawData\",null,\"queryTriggerDelay\",\"0\",\"resourceTypeOverride\",null,\"watchedParams\",[\"^D\",[]],\"enableErrorTransformer\",false,\"showLatestVersionUpdatedWarning\",false,\"timestamp\",0,\"importedQueryDefaults\",[\"^3\",[]],\"enableTransformer\",false,\"showUpdateSetValueDynamicallyToggle\",true,\"runWhenPageLoads\",false,\"transformer\",\"// type your code here\\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\\nreturn data\",\"events\",[\"^D\",[]],\"queryTimeout\",\"10000\",\"requireConfirmation\",false,\"queryFailureConditions\",\"\",\"changesetIsObject\",false,\"enableCaching\",false,\"allowedGroups\",[\"^D\",[]],\"queryThrottleTime\",\"750\",\"updateSetValueDynamically\",false,\"notificationDuration\",\"\"]],\"^:\",null,\"^;\",null,\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1662590720034\",\"^A\",\"~m1668731490366\",\"^B\",\"js\",\"^C\",null]]],\"addInboundToHistory\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"addInboundToHistory\",\"^4\",\"datasource\",\"^5\",\"JavascriptQuery\",\"^6\",null,\"^7\",\"JavascriptQuery\",\"^8\",null,\"^9\",[\"^3\",[\"queryRefreshTime\",\"\",\"lastReceivedFromResourceAt\",null,\"queryDisabledMessage\",\"\",\"successMessage\",\"\",\"queryDisabled\",\"\",\"playgroundQuerySaveId\",\"latest\",\"resourceNameOverride\",\"\",\"runWhenModelUpdates\",false,\"showFailureToaster\",true,\"query\",\"// Usage: Process inbound messags\\n// Triggered by: Success event handler on listenForModelUpdates\\n\\nconst history = messageHistory.value;\\n\\n// Get the last inbound message from temp state\\nconst lastInbound = lastInboundMessage.value;\\n\\n// Get the new inbound message from the custom component model\\nconst newInbound = twilioConversationsCustomComponent.model.inbound;\\n\\n// If the new inbound message hasn't been processed yet...\\nif (lastInbound != newInbound) {\\n  // Push the message to messageHistory temp state\\n  const payload = { message: newInbound, direction: \\\"inbound\\\" };\\n  history.push(payload);\\n  messageHistory.setValue(history);\\n\\n  // Update the last processed inbound message temp state\\n  lastInboundMessage.setValue(newInbound);\\n}\\n\",\"playgroundQueryUuid\",\"\",\"playgroundQueryId\",null,\"error\",null,\"privateParams\",[\"^D\",[]],\"runWhenPageLoadsDelay\",\"\",\"data\",null,\"importedQueryInputs\",[\"^3\",[]],\"isImported\",false,\"showSuccessToaster\",false,\"cacheKeyTtl\",\"\",\"metadata\",null,\"changesetObject\",\"\",\"errorTransformer\",\"// The variable 'data' allows you to reference the request's data in the transformer. \\n// example: return data.find(element => element.isError)\\nreturn data.error\",\"confirmationMessage\",null,\"isFetching\",false,\"changeset\",\"\",\"rawData\",null,\"queryTriggerDelay\",\"0\",\"resourceTypeOverride\",null,\"watchedParams\",[\"^D\",[]],\"enableErrorTransformer\",false,\"showLatestVersionUpdatedWarning\",false,\"timestamp\",0,\"importedQueryDefaults\",[\"^3\",[]],\"enableTransformer\",false,\"showUpdateSetValueDynamicallyToggle\",true,\"runWhenPageLoads\",false,\"transformer\",\"// type your code here\\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\\nreturn data\",\"events\",[\"^D\",[]],\"queryTimeout\",\"10000\",\"requireConfirmation\",false,\"queryFailureConditions\",\"\",\"changesetIsObject\",false,\"enableCaching\",false,\"allowedGroups\",[\"^D\",[]],\"queryThrottleTime\",\"750\",\"updateSetValueDynamically\",false,\"notificationDuration\",\"\"]],\"^:\",null,\"^;\",null,\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1662589925380\",\"^A\",\"~m1663103672440\",\"^B\",\"js\",\"^C\",null]]],\"initialize\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"initialize\",\"^4\",\"datasource\",\"^5\",\"JavascriptQuery\",\"^6\",null,\"^7\",\"JavascriptQuery\",\"^8\",null,\"^9\",[\"^3\",[\"queryRefreshTime\",\"\",\"lastReceivedFromResourceAt\",null,\"queryDisabledMessage\",\"\",\"successMessage\",\"\",\"queryDisabled\",\"\",\"playgroundQuerySaveId\",\"latest\",\"resourceNameOverride\",\"\",\"runWhenModelUpdates\",false,\"showFailureToaster\",true,\"query\",\"// Usage: Prepare the app for first run by deleting old Conversations, passing a Twilio access token to twilioConversationsCustomComponent, and unhiding UI elements.\\n// Triggered by: page load\\n\\n// Get all Twilio Conversations\\nconst data = await getConversations.trigger();\\n\\nconsole.log(data)\\n\\n// Get a list of all Conversation SIDs\\nconst conversationSids = data.conversations.map(\\n  (conversation) => conversation.sid\\n);\\n\\n// Delete all Conversations, passing each Conversation SID to the deleteConverstions query using additionalScope:\\n// https://docs.retool.com/docs/scripting-retool#trigger-a-query\\nfor (const sid of conversationSids) {\\n  await deleteConversations.trigger({ additionalScope: { sid: sid } });\\n}\\n\\n// Get a new chat-enabled Twilio access token\\nawait getChatToken.trigger();\\n\\n// Inform the twilioConversationsCustomComponent that all pending conversations have been deleted\\ntwilioConversationsCustomComponent.updateModel({ conversationsCleared: true });\\n\\n// Toggle UI component display to enable normal app usage\\nloadingSpinner.setHidden(true);\\nsmsSettingsContainer.setHidden(false);\\nchatContainer.setHidden(false);\\nmodelViewerContainer.setHidden(false);\\n\",\"playgroundQueryUuid\",\"\",\"playgroundQueryId\",null,\"error\",null,\"privateParams\",[\"^D\",[]],\"runWhenPageLoadsDelay\",\"\",\"data\",null,\"importedQueryInputs\",[\"^3\",[]],\"isImported\",false,\"showSuccessToaster\",false,\"cacheKeyTtl\",\"\",\"metadata\",null,\"changesetObject\",\"\",\"errorTransformer\",\"// The variable 'data' allows you to reference the request's data in the transformer. \\n// example: return data.find(element => element.isError)\\nreturn data.error\",\"confirmationMessage\",null,\"isFetching\",false,\"changeset\",\"\",\"rawData\",null,\"queryTriggerDelay\",\"0\",\"resourceTypeOverride\",null,\"watchedParams\",[\"^D\",[]],\"enableErrorTransformer\",false,\"showLatestVersionUpdatedWarning\",false,\"timestamp\",0,\"importedQueryDefaults\",[\"^3\",[]],\"enableTransformer\",false,\"showUpdateSetValueDynamicallyToggle\",true,\"runWhenPageLoads\",false,\"transformer\",\"// type your code here\\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\\nreturn data\",\"events\",[\"^D\",[[\"^3\",[\"event\",\"success\",\"type\",\"widget\",\"method\",\"setValue\",\"pluginId\",\"messageInput\",\"targetId\",null,\"params\",[\"^3\",[\"value\",\"\\\" \\\"\"]],\"waitType\",\"debounce\",\"waitMs\",\"0\"]]]],\"queryTimeout\",\"10000\",\"requireConfirmation\",false,\"queryFailureConditions\",\"\",\"changesetIsObject\",false,\"enableCaching\",false,\"allowedGroups\",[\"^D\",[]],\"queryThrottleTime\",\"750\",\"updateSetValueDynamically\",false,\"notificationDuration\",\"\"]],\"^:\",null,\"^;\",null,\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1662567790505\",\"^A\",\"~m1668732142873\",\"^B\",\"js\",\"^C\",null]]],\"getConversations\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"getConversations\",\"^4\",\"datasource\",\"^5\",\"OpenAPIQuery\",\"^6\",null,\"^7\",\"1701d6b5-6146-420e-8127-b8da8c78b1da\",\"^8\",\"Twilio Conversations API\",\"^9\",[\"^3\",[\"queryRefreshTime\",\"\",\"method\",\"get\",\"operationId\",\"ListServiceConversation\",\"lastReceivedFromResourceAt\",null,\"queryDisabledMessage\",\"\",\"server\",null,\"successMessage\",\"\",\"queryDisabled\",\"\",\"path\",\"/v1/Services/{ChatServiceSid}/Conversations\",\"playgroundQuerySaveId\",\"latest\",\"resourceNameOverride\",\"\",\"runWhenModelUpdates\",false,\"autoPaginate\",false,\"showFailureToaster\",true,\"query\",\"\",\"playgroundQueryUuid\",\"\",\"playgroundQueryId\",null,\"error\",null,\"privateParams\",[\"^D\",[]],\"runWhenPageLoadsDelay\",\"\",\"parameters\",\"{\\\"ChatServiceSid\\\":\\\"{{conversationsServiceIdInput.value}}\\\"}\",\"data\",null,\"specPathOverride\",\"https://specs.retool.com/specs/twilio/twilio_conversations_v1/3.0.1/1.9.0.json\",\"importedQueryInputs\",[\"^3\",[]],\"isImported\",false,\"showSuccessToaster\",false,\"cacheKeyTtl\",\"\",\"metadata\",null,\"requestBodyDynamicStates\",\"{\\\"Attributes\\\":false,\\\"DateCreated\\\":false,\\\"DateUpdated\\\":false,\\\"FriendlyName\\\":false,\\\"MessagingServiceSid\\\":false,\\\"State\\\":false,\\\"Timers.Closed\\\":false,\\\"Timers.Inactive\\\":false,\\\"UniqueName\\\":false}\",\"changesetObject\",\"\",\"requestBody\",null,\"errorTransformer\",\"// The variable 'data' allows you to reference the request's data in the transformer. \\n// example: return data.find(element => element.isError)\\nreturn data.error\",\"specBasePath\",null,\"confirmationMessage\",null,\"isFetching\",false,\"changeset\",\"\",\"rawData\",null,\"queryTriggerDelay\",\"0\",\"resourceTypeOverride\",\"\",\"watchedParams\",[\"^D\",[]],\"serverVariables\",\"{}\",\"enableErrorTransformer\",false,\"autoPaginateLimit\",500,\"showLatestVersionUpdatedWarning\",false,\"timestamp\",0,\"importedQueryDefaults\",[\"^3\",[]],\"enableTransformer\",false,\"showUpdateSetValueDynamicallyToggle\",true,\"parameterDynamicStates\",\"{\\\"PageSize\\\":false}\",\"runWhenPageLoads\",false,\"transformer\",\"// type your code here\\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\\nreturn data\",\"events\",[\"^D\",[]],\"queryTimeout\",\"10000\",\"requireConfirmation\",false,\"queryFailureConditions\",\"\",\"changesetIsObject\",false,\"enableCaching\",false,\"allowedGroups\",[\"^D\",[]],\"queryThrottleTime\",\"750\",\"updateSetValueDynamically\",false,\"notificationDuration\",\"\"]],\"^:\",null,\"^;\",null,\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1662567685284\",\"^A\",\"~m1668732963772\",\"^B\",\"gets\",\"^C\",null]]],\"getChatToken\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"getChatToken\",\"^4\",\"datasource\",\"^5\",\"RESTQuery\",\"^6\",null,\"^7\",\"d5c8102b-26f6-453b-8406-9da5c323c76d\",\"^8\",\"Twilio Conversations Chat Token\",\"^9\",[\"^3\",[\"queryRefreshTime\",\"\",\"paginationLimit\",\"\",\"body\",\"\",\"lastReceivedFromResourceAt\",null,\"queryDisabledMessage\",\"\",\"successMessage\",\"\",\"queryDisabled\",\"\",\"playgroundQuerySaveId\",\"latest\",\"resourceNameOverride\",\"\",\"runWhenModelUpdates\",false,\"paginationPaginationField\",\"\",\"headers\",\"\",\"showFailureToaster\",true,\"paginationEnabled\",false,\"query\",\"\",\"playgroundQueryUuid\",\"\",\"playgroundQueryId\",null,\"error\",null,\"privateParams\",[\"^D\",[]],\"runWhenPageLoadsDelay\",\"\",\"data\",null,\"importedQueryInputs\",[\"^3\",[]],\"isImported\",false,\"showSuccessToaster\",false,\"cacheKeyTtl\",\"\",\"cookies\",\"\",\"metadata\",null,\"changesetObject\",\"\",\"errorTransformer\",\"// The variable 'data' allows you to reference the request's data in the transformer. \\n// example: return data.find(element => element.isError)\\nreturn data.error\",\"confirmationMessage\",null,\"isFetching\",false,\"changeset\",\"\",\"rawData\",null,\"queryTriggerDelay\",\"0\",\"resourceTypeOverride\",null,\"watchedParams\",[\"^D\",[]],\"enableErrorTransformer\",false,\"showLatestVersionUpdatedWarning\",false,\"paginationDataField\",\"\",\"timestamp\",0,\"importedQueryDefaults\",[\"^3\",[]],\"enableTransformer\",false,\"showUpdateSetValueDynamicallyToggle\",true,\"runWhenPageLoads\",false,\"transformer\",\"// type your code here\\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\\nreturn data\",\"events\",[\"^D\",[[\"^3\",[\"event\",\"success\",\"type\",\"widget\",\"method\",\"updateModel\",\"pluginId\",\"twilioConversationsCustomComponent\",\"targetId\",null,\"params\",[\"^3\",[\"model\",\"{token: {{ getChatToken.data.token }} } \"]],\"waitType\",\"debounce\",\"waitMs\",\"0\"]]]],\"queryTimeout\",\"10000\",\"requireConfirmation\",false,\"type\",\"GET\",\"queryFailureConditions\",\"\",\"changesetIsObject\",false,\"enableCaching\",false,\"allowedGroups\",[\"^D\",[]],\"bodyType\",\"json\",\"queryThrottleTime\",\"750\",\"updateSetValueDynamically\",false,\"notificationDuration\",\"\"]],\"^:\",null,\"^;\",null,\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1662509194496\",\"^A\",\"~m1663627930314\",\"^B\",\"gets\",\"^C\",null]]],\"lastInboundMessage\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"lastInboundMessage\",\"^4\",\"state\",\"^5\",\"State\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"_persistedValueGetter\",null,\"_persistedValueSetter\",null,\"persistValue\",false,\"persistedValueKey\",\"\",\"value\",null]],\"^:\",null,\"^;\",null,\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1662656388944\",\"^A\",\"~m1662656388944\",\"^B\",\"tempState\",\"^C\",null]]],\"messageHistory\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"messageHistory\",\"^4\",\"state\",\"^5\",\"State\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"_persistedValueGetter\",null,\"_persistedValueSetter\",null,\"persistValue\",false,\"persistedValueKey\",\"\",\"value\",\"[]\"]],\"^:\",null,\"^;\",null,\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1662589838245\",\"^A\",\"~m1662590133805\",\"^B\",\"tempState\",\"^C\",null]]],\"twilioConversationsCustomComponent\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"twilioConversationsCustomComponent\",\"^4\",\"widget\",\"^5\",\"CustomComponentWidget\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"allowTopNavigation\",false,\"heightType\",\"fixed\",\"allowDownloads\",false,\"allowFullscreen\",false,\"allowForms\",false,\"model\",\"{}\",\"hidden\",\"\",\"allowCamera\",false,\"allowModals\",false,\"showInEditor\",false,\"allowPopups\",false,\"iframeCode\",\"<!-- Retool custom component model\\n{\\n  browser (string): \\\"Chrome\\\" | \\\"Not Chrome\\\",\\n  conversationCleared (boolean): < set by initialize Retool JS query >,\\n  token (string): < a Twilio JWT containing a chat access token >,\\n  status: (string): \\\"The client successfully initialized!\\\",\\n  error: (string): \\\"The client failed to initialize\\\",\\n  conversationSid (string): < a Twilio SID associated with the active Conversation >,\\n  customerNumber (string): < the E.164-formatted phone number of the participating attached to the Conversation>,\\n  outbound (string): < the most recent message sent by the Retool user >,\\n  inbound (string): < the most recent message received from the customer > \\n}\\n-->\\n\\n<!DOCTYPE html>\\n<html>\\n  <head>\\n    <title>Embedded Twilio Conversations Client for Retool</title>\\n    <!-- Initialize the Twilio Conversations SDK: https://www.twilio.com/docs/conversations/javascript/changelog#latest-release -->\\n    <script\\n      src=\\\"https://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/twilio-conversations.min.js\\\"\\n      integrity=\\\"sha256-v2SFLWujVq0wnwHpcxct7bzTP8wII7sumEhAKMEqgHQ=\\\"\\n      crossorigin=\\\"anonymous\\\"\\n    ></script>\\n\\n    <script>\\n      // Parse the Retool user's userAgent to determine if they are using Chrome.\\n      // Non-Chrome browsers may restrict access to WebSockets, the technology which powers bi-directional communication between\\n      // the Conversations SDK and service.\\n      if (navigator.userAgent.indexOf(\\\"Chrome\\\") > -1) {\\n        window.Retool.modelUpdate({ browser: \\\"Chrome\\\" });\\n      } else {\\n        window.Retool.modelUpdate({ browser: \\\"Not Chrome\\\" });\\n      }\\n\\n      // Initialize variables to be used inside of the window.Retool.subscribe function\\n      var client;\\n      var conversation;\\n      var inboundListener;\\n      var outboundMessage;\\n      var inboundMessage;\\n\\n      // window.Retool.subscribe is evaluated whenever the Retool custom component model changes: https://docs.retool.com/docs/custom-components#non-react-javascript\\n      window.Retool.subscribe(async function (model) {\\n        \\n        // If a chat token is passed into the model, and the Client object is not yet available...\\n        if (model.token && !client && model.conversationsCleared) {\\n          client = new Twilio.Conversations.Client(model.token); // Instantiate a new Client: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/#instantiating-and-using\\n\\n          // Set event handlers on the new Client which trigger log messages: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Client.html#stateChanged\\n          client.on(\\\"stateChanged\\\", (state) => {\\n            if (state === \\\"failed\\\") {\\n              window.Retool.modelUpdate({\\n                // Update the model with the error: https://docs.retool.com/docs/custom-components#non-react-javascript\\n                error: \\\"The client failed to initialize\\\",\\n              });\\n            }\\n\\n            if (state === \\\"initialized\\\") {\\n              window.Retool.modelUpdate({\\n                status: \\\"The client successfully initialized!\\\",\\n              });\\n            }\\n          });\\n        }\\n\\n        // If the Client is inititialized and no Conversation has been created...\\n        if (client && !conversation) {\\n          conversation = \\\"initializing\\\";\\n          conversation = await client.createConversation(); // Create a Conversation: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Client.html#createConversation\\n          await conversation.join(); // Join the Conversation: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Conversation.html#join\\n          window.Retool.modelUpdate({ conversationSid: conversation.sid }); // Pass the Conversation SID to the component model\\n        }\\n\\n        // If the Client is initialized, a customer number has been passed to the model, and no inbound message listener has been defined...\\n        if (client && model.customerNumber && !inboundListener) {\\n          client.on(\\\"messageAdded\\\", (message) => {\\n            // When a message is added to the conversation: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Client.html#messageAdded\\n            if (\\n              // If the message author is the customer, and we haven't processed the message already...\\n              message.state.author === model.customerNumber &&\\n              message.state.body != inboundMessage\\n            ) {\\n              // Push the message to the component model.\\n              inboundMessage = message.state.body;\\n              window.Retool.modelUpdate({ inbound: message.state.body });\\n            }\\n          });\\n          inboundListener = true;\\n        }\\n\\n        // If the Client and Conversations are initialized, there is an outbound message on the model, and we haven't procesed it yet...\\n        if (\\n          client &&\\n          conversation &&\\n          model.outbound &&\\n          model.outbound != outboundMessage\\n        ) {\\n          outboundMessage = model.outbound;\\n          await conversation.sendMessage(outboundMessage); // Send the message: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Conversation.html#sendMessage\\n        }\\n      });\\n    </script>\\n  </head>\\n  <body>\\n    <p style=\\\"font-family:sans-serif;\\\">Twilio Conversations Custom Component</p>\\n  </body>\\n</html>\\n\",\"allowMicrophone\",false,\"allowSameOrigin\",false,\"allowPopupsToEscapeSandbox\",false,\"allowPayment\",false,\"allowGeolocation\",false]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"\",\"rowGroup\",\"body\",\"subcontainer\",\"\",\"row\",16.599999999999998,\"col\",0,\"height\",1.5999999999999999,\"width\",4,\"tabNum\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1654643387016\",\"^A\",\"~m1668810086643\",\"^B\",\"\",\"^C\",null]]],\"alert1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"alert1\",\"^4\",\"widget\",\"^5\",\"AlertWidget\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"valueToCopy\",\"\",\"internalUrlHashParams\",\"\",\"hidden\",\"{{!twilioConversationsCustomComponent.model.error}}\",\"exportFileType\",\"csv\",\"buttonType\",\"action\",\"url\",\"\",\"newWindow\",false,\"exportQuery\",\"\",\"action\",\"\",\"internalUrlQuery\",\"\",\"internalUrlPath\",\"\",\"title\",\"Error\",\"events\",[\"^D\",[]],\"type\",\"error\",\"exportFileName\",\"\",\"description\",\"{{twilioConversationsCustomComponent.model.error}}\",\"buttonText\",\"\"]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"\",\"^E\",\"body\",\"^F\",\"header\",\"row\",0,\"col\",6,\"^G\",1,\"^H\",6,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1654792365293\",\"^A\",\"~m1663102600772\",\"^B\",\"\",\"^C\",null]]],\"$main\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"$main\",\"^4\",\"frame\",\"^5\",\"Frame\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"type\",\"main\",\"sticky\",false]],\"^:\",[\"^3\",[]],\"^;\",null,\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1661195953770\",\"^A\",\"~m1661195953770\",\"^B\",\"\",\"^C\",null]]],\"$header\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"$header\",\"^4\",\"frame\",\"^5\",\"Frame\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"type\",\"header\",\"sticky\",true]],\"^:\",[\"^3\",[]],\"^;\",null,\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1661195953771\",\"^A\",\"~m1661195953771\",\"^B\",\"\",\"^C\",null]]],\"chatContainer\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"chatContainer\",\"^4\",\"widget\",\"^5\",\"ContainerWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"_disabledByIndex\",[\"^D\",[\"\"]],\"heightType\",\"fixed\",\"currentViewKey\",null,\"iconByIndex\",[],\"clickable\",false,\"_iconByIndex\",[\"^D\",[\"\"]],\"hidden\",\"true\",\"showHeader\",true,\"hoistFetching\",true,\"views\",[],\"showInEditor\",false,\"tooltipText\",\"\",\"hiddenByIndex\",[],\"_hiddenByIndex\",[\"^D\",[\"\"]],\"currentViewIndex\",null,\"_hasMigratedNestedItems\",true,\"transition\",\"none\",\"itemMode\",\"static\",\"_tooltipByIndex\",[\"^D\",[\"\"]],\"tooltipByIndex\",[],\"showFooter\",false,\"_viewKeys\",[\"^D\",[\"View 1\"]],\"events\",[\"^3\",[]],\"_ids\",[\"^D\",[\"d9fee\"]],\"viewKeys\",[],\"iconPositionByIndex\",[],\"_iconPositionByIndex\",[\"^D\",[\"\"]],\"hovered\",false,\"loading\",false,\"overflowType\",\"hidden\",\"disabled\",false,\"_labels\",[\"^D\",[\"\"]],\"disabledByIndex\",[],\"maintainSpaceWhenHidden\",false,\"showBody\",true,\"labels\",[]]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",1.6653345369377348e-16,\"col\",4,\"^G\",13.799999999999999,\"^H\",4,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1661245175602\",\"^A\",\"~m1662655604789\",\"^B\",\"\",\"^C\",null]]],\"containerTitle1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"containerTitle1\",\"^4\",\"widget\",\"^5\",\"TextWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"heightType\",\"auto\",\"horizontalAlign\",\"left\",\"hidden\",false,\"imageWidth\",\"fit\",\"showInEditor\",false,\"verticalAlign\",\"center\",\"tooltipText\",\"\",\"value\",\"#### Real-time SMS\",\"disableMarkdown\",false,\"overflowType\",\"scroll\",\"maintainSpaceWhenHidden\",false]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"chatContainer\",\"^E\",\"header\",\"^F\",\"\",\"row\",0,\"col\",0,\"^G\",0.6,\"^H\",12,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1661245175882\",\"^A\",\"~m1663625181934\",\"^B\",\"\",\"^C\",null]]],\"messagesListView\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"messagesListView\",\"^4\",\"widget\",\"^5\",\"ListViewWidget\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"heightType\",\"fixed\",\"showBorder\",false,\"data\",\"\",\"showDropShadow\",false,\"formDataKey\",\"{{ self.id }}\",\"dynamicHeightsEnabled\",true,\"itemHeight\",\"3\",\"overflowType\",\"scroll\",\"instances\",\"{{ messageHistory.value.length }}\"]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"chatContainer\",\"^E\",\"body\",\"^F\",\"d9fee\",\"row\",-3.885780586188048e-16,\"col\",0,\"^G\",10.8,\"^H\",12,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1661245297241\",\"^A\",\"~m1663007436029\",\"^B\",\"\",\"^C\",null]]],\"message\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"message\",\"^4\",\"widget\",\"^5\",\"HTMLWidget\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"hidden\",false,\"maintainSpaceWhenHidden\",false,\"showInEditor\",false,\"tooltipText\",\"\",\"css\",\"/* CSS courtesy of https://codepen.io/AllThingsSmitty/pen/jommGQ */\\n\\n.imessage {\\n  background-color: #fff;\\n  border-radius: 0.25rem;\\n  display: flex;\\n  flex-direction: column;\\n  font-family: -apple-system, system-ui, BlinkMacSystemFont;\\n  font-size: 1.25rem;\\n  margin: 0 auto 1rem;\\n  max-width: 600px;\\n}\\n\\n.imessage p {\\n  border-radius: 1.15rem;\\n  line-height: 1.25;\\n  max-width: 75%;\\n  padding: 0.5rem .875rem;\\n  position: relative;\\n  word-wrap: break-word;\\n}\\n\\n.imessage p::before,\\n.imessage p::after {\\n  bottom: -0.1rem;\\n  content: \\\"\\\";\\n  height: 1rem;\\n  position: absolute;\\n}\\n\\np.from-me {\\n  align-self: flex-end;\\n  background-color: #248bf5;\\n  color: #fff; \\n}\\n\\np.from-me::before {\\n  border-bottom-left-radius: 0.8rem 0.7rem;\\n  border-right: 1rem solid #248bf5;\\n  right: -0.35rem;\\n  transform: translate(0, -0.1rem);\\n}\\n\\np.from-me::after {\\n  background-color: #fff;\\n  border-bottom-left-radius: 0.5rem;\\n  right: -40px;\\n  transform:translate(-30px, -2px);\\n  width: 10px;\\n}\\n\\np[class^=\\\"from-\\\"] {\\n  margin: 0.5rem 0;\\n  width: fit-content;\\n}\\n\\np.from-me ~ p.from-me {\\n  margin: 0.25rem 0 0;\\n}\\n\\np.from-me ~ p.from-me:not(:last-child) {\\n  margin: 0.25rem 0 0;\\n}\\n\\np.from-me ~ p.from-me:last-child {\\n  margin-bottom: 0.5rem;\\n}\\n\\np.from-them {\\n  align-items: flex-start;\\n  background-color: #e5e5ea;\\n  color: #000;\\n}\\n\\np.from-them:before {\\n  border-bottom-right-radius: 0.8rem 0.7rem;\\n  border-left: 1rem solid #e5e5ea;\\n  left: -0.35rem;\\n  transform: translate(0, -0.1rem);\\n}\\n\\np.from-them::after {\\n  background-color: #fff;\\n  border-bottom-right-radius: 0.5rem;\\n  left: 20px;\\n  transform: translate(-30px, -2px);\\n  width: 10px;\\n}\\n\\np[class^=\\\"from-\\\"].emoji {\\n  background: none;\\n  font-size: 2.5rem;\\n}\\n\\np[class^=\\\"from-\\\"].emoji::before {\\n  content: none;\\n}\\n\\n.no-tail::before {\\n  display: none;\\n}\\n\\n.margin-b_none {\\n  margin-bottom: 0 !important;\\n}\\n\\n.margin-b_one {\\n  margin-bottom: 1rem !important;\\n}\\n\\n.margin-t_one {\\n  margin-top: 1rem !important;\\n}\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n/* general styling */\\n@font-face {\\n  font-family: \\\"SanFrancisco\\\";\\n  src:\\n    url(\\\"https://cdn.rawgit.com/AllThingsSmitty/fonts/25983b71/SanFrancisco/sanfranciscodisplay-regular-webfont.woff2\\\") format(\\\"woff2\\\"),\\n    url(\\\"https://cdn.rawgit.com/AllThingsSmitty/fonts/25983b71/SanFrancisco/sanfranciscodisplay-regular-webfont.woff\\\") format(\\\"woff\\\");\\n}\\n\\n._retool-messagesListView {  \\n  font-family: -apple-system, \\n    BlinkMacSystemFont, \\n    \\\"Segoe UI\\\", \\n    Roboto, \\n    Oxygen-Sans, \\n    Ubuntu, \\n    Cantarell, \\n    \\\"Helvetica Neue\\\", \\n    sans-serif;\\n  font-weight: normal;\\n  margin: 0;\\n}\\n\\n._retool-messageListView.container {\\n  margin: 0 auto;\\n  max-width: 600px;\\n  padding: 1rem;\\n}\\n\\n._retool-messageListView h1 {\\n  font-weight: normal;\\n  margin-bottom: 0.5rem;\\n}\\n\\n._retool-messageListView h2 {\\n  border-bottom: 1px solid #e5e5ea;\\n  color: #666;\\n  font-weight: normal;\\n  margin-top: 0;\\n  padding-bottom: 1.5rem;\\n}\\n\\n.comment {\\n  color: #222;\\n  font-size: 1.25rem;\\n  line-height: 1.5;\\n  margin-bottom: 1.25rem;\\n  max-width: 100%;\\n  padding: 0;\\n}\\n\\n@media screen and (max-width: 800px) {\\n  ._retool-messageListView {\\n    margin: 0 0.5rem;\\n  }\\n\\n  ._retool-messageListView.container {\\n    padding: 0.5rem;\\n  }\\n\\n  .imessage {\\n    font-size: 1.05rem;\\n    margin: 0 auto 1rem;\\n    max-width: 600px;\\n    padding: 0.25rem 0.875rem;\\n  }\\n\\n  .imessage p {\\n    margin: 0.5rem 0;\\n  }\\n}\",\"html\",\"<div class=\\\"imessage\\\">\\n  <p class={{ messageHistory.value[i].direction === \\\"outbound\\\" ? 'from-me' : 'from-them'}} id={{\\\"message\\\"}}> {{ messageHistory.value[i].message }}\\n  </p>   \\n</div>\"]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"messagesListView\",\"^E\",\"body\",\"^F\",\"\",\"row\",0,\"col\",0,\"^G\",0.2,\"^H\",12,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1661245555927\",\"^A\",\"~m1663716266077\",\"^B\",\"\",\"^C\",null]]],\"smsSettingsContainer\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"smsSettingsContainer\",\"^4\",\"widget\",\"^5\",\"ContainerWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"_disabledByIndex\",[\"^D\",[\"\"]],\"heightType\",\"auto\",\"currentViewKey\",null,\"iconByIndex\",[],\"clickable\",false,\"_iconByIndex\",[\"^D\",[\"\"]],\"hidden\",\"true\",\"showHeader\",true,\"hoistFetching\",true,\"views\",[],\"showInEditor\",false,\"tooltipText\",\"\",\"hiddenByIndex\",[],\"_hiddenByIndex\",[\"^D\",[\"\"]],\"currentViewIndex\",null,\"_hasMigratedNestedItems\",true,\"transition\",\"none\",\"itemMode\",\"static\",\"_tooltipByIndex\",[\"^D\",[\"\"]],\"tooltipByIndex\",[],\"showFooter\",true,\"_viewKeys\",[\"^D\",[\"View 1\"]],\"events\",[\"^3\",[]],\"_ids\",[\"^D\",[\"b21d2\"]],\"viewKeys\",[],\"iconPositionByIndex\",[],\"_iconPositionByIndex\",[\"^D\",[\"\"]],\"hovered\",false,\"loading\",false,\"overflowType\",\"scroll\",\"disabled\",false,\"_labels\",[\"^D\",[\"\"]],\"disabledByIndex\",[],\"maintainSpaceWhenHidden\",false,\"showBody\",true,\"labels\",[]]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",0.7999999999999994,\"col\",0,\"^G\",0.2,\"^H\",4,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1661294368573\",\"^A\",\"~m1663629706166\",\"^B\",\"\",\"^C\",null]]],\"containerTitle2\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"containerTitle2\",\"^4\",\"widget\",\"^5\",\"TextWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"heightType\",\"auto\",\"horizontalAlign\",\"left\",\"hidden\",false,\"imageWidth\",\"fit\",\"showInEditor\",false,\"verticalAlign\",\"center\",\"tooltipText\",\"\",\"value\",\"#### SMS settings\",\"disableMarkdown\",false,\"overflowType\",\"scroll\",\"maintainSpaceWhenHidden\",false]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"smsSettingsContainer\",\"^E\",\"header\",\"^F\",\"\",\"row\",0,\"col\",0,\"^G\",0.6,\"^H\",12,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1661294368735\",\"^A\",\"~m1661294383238\",\"^B\",\"\",\"^C\",null]]],\"customerNumberInput\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"customerNumberInput\",\"^4\",\"widget\",\"^5\",\"TextInputWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"spellCheck\",false,\"readOnly\",false,\"iconAfter\",\"\",\"showCharacterCount\",false,\"autoComplete\",false,\"maxLength\",null,\"hidden\",false,\"customValidation\",\"\",\"patternType\",\"\",\"hideValidationMessage\",false,\"textBefore\",\"\",\"validationMessage\",\"\",\"textAfter\",\"\",\"showInEditor\",false,\"showClear\",false,\"pattern\",\"\",\"tooltipText\",\"\",\"labelAlign\",\"left\",\"formDataKey\",\"{{ self.id }}\",\"value\",\"\",\"labelCaption\",\"\",\"labelWidth\",\"33\",\"autoFill\",\"\",\"placeholder\",\"Enter phone number\",\"label\",\"Customer #\",\"_validate\",false,\"labelWidthUnit\",\"%\",\"invalid\",false,\"iconBefore\",\"\",\"minLength\",null,\"inputTooltip\",\"\",\"events\",[\"^D\",[]],\"autoCapitalize\",\"none\",\"loading\",false,\"disabled\",false,\"labelPosition\",\"left\",\"labelWrap\",false,\"maintainSpaceWhenHidden\",false,\"required\",true]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"smsSettingsContainer\",\"^E\",\"body\",\"^F\",\"b21d2\",\"row\",1,\"col\",0,\"^G\",1,\"^H\",12,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1661294392612\",\"^A\",\"~m1666975881756\",\"^B\",\"\",\"^C\",null]]],\"text1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"text1\",\"^4\",\"widget\",\"^5\",\"TextWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"heightType\",\"auto\",\"horizontalAlign\",\"left\",\"hidden\",false,\"imageWidth\",\"fit\",\"showInEditor\",false,\"verticalAlign\",\"top\",\"tooltipText\",\"\",\"value\",\"### SMS with Twilio Conversations\\n###### ℹ️ This demo uses the Twilio Conversations JS SDK to establish bi-directional messaging with an SMS client.\\n\",\"disableMarkdown\",false,\"overflowType\",\"scroll\",\"maintainSpaceWhenHidden\",false]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",0.2,\"col\",0,\"^G\",0.6000000000000001,\"^H\",4,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1661297146482\",\"^A\",\"~m1663109057579\",\"^B\",\"\",\"^C\",null]]],\"jsonExplorer1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"jsonExplorer1\",\"^4\",\"widget\",\"^5\",\"JSONExplorerWidget\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"value\",\"{{twilioConversationsCustomComponent.model}}\",\"html\",false,\"expandNodes\",true]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"modelViewerContainer\",\"^E\",\"body\",\"^F\",\"07571\",\"row\",0,\"col\",0,\"^G\",12.200000000000001,\"^H\",12,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1662569527052\",\"^A\",\"~m1663102600788\",\"^B\",\"\",\"^C\",null]]],\"modelViewerContainer\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"modelViewerContainer\",\"^4\",\"widget\",\"^5\",\"ContainerWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"_disabledByIndex\",[\"^D\",[\"\"]],\"heightType\",\"auto\",\"currentViewKey\",null,\"iconByIndex\",[],\"clickable\",false,\"_iconByIndex\",[\"^D\",[\"\"]],\"hidden\",\"true\",\"showHeader\",true,\"hoistFetching\",true,\"views\",[],\"showInEditor\",false,\"tooltipText\",\"\",\"hiddenByIndex\",[],\"_hiddenByIndex\",[\"^D\",[\"\"]],\"currentViewIndex\",null,\"_hasMigratedNestedItems\",true,\"transition\",\"none\",\"itemMode\",\"static\",\"_tooltipByIndex\",[\"^D\",[\"\"]],\"tooltipByIndex\",[],\"showFooter\",false,\"_viewKeys\",[\"^D\",[\"View 1\"]],\"events\",[\"^3\",[]],\"_ids\",[\"^D\",[\"07571\"]],\"viewKeys\",[],\"iconPositionByIndex\",[],\"_iconPositionByIndex\",[\"^D\",[\"\"]],\"hovered\",false,\"loading\",false,\"overflowType\",\"scroll\",\"disabled\",false,\"_labels\",[\"^D\",[\"\"]],\"disabledByIndex\",[],\"maintainSpaceWhenHidden\",false,\"showBody\",\"{{modelToggle.value}}\",\"labels\",[]]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",3.4000000000000066,\"col\",0,\"^G\",13.2,\"^H\",4,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1662654149461\",\"^A\",\"~m1663013454675\",\"^B\",\"\",\"^C\",null]]],\"loadingSpinner\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"loadingSpinner\",\"^4\",\"widget\",\"^5\",\"HTMLWidget\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"hidden\",false,\"maintainSpaceWhenHidden\",false,\"showInEditor\",false,\"tooltipText\",\"\",\"css\",\".flexbox {\\n  justify-content:center;\\n  display:flex;\\n}\\n.loader {\\n            \\n  \\t\\t\\t\\t\\tborder: 16px solid transparent;\\n            border-top: 16px solid blue;\\n            border-radius: 50%;\\n            width: 120px;\\n            height: 120px;\\n            animation: spinloader 2s linear infinite;\\n        }\\n  \\n        .loader img {\\n            height: 120px;\\n            width: 120px;\\n            animation: spinlogo 2s linear infinite;\\n        }\\n  \\n        @keyframes spinloader {\\n            0% {\\n                transform: rotate(0deg);\\n            }\\n  \\n            100% {\\n                transform: rotate(360deg);\\n            }\\n        }\\n\",\"html\",\"<div class=\\\"flexbox\\\">\\n  <div style=\\\"font-family:sans-serif;\\\">Twilio Conversations initializing...\\n\\t<div class=\\\"loader\\\" />\\n</div>\"]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",17.2,\"col\",5,\"^G\",0.2,\"^H\",3,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1662655534456\",\"^A\",\"~m1663626727911\",\"^B\",\"\",\"^C\",null]]],\"alert3\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"alert3\",\"^4\",\"widget\",\"^5\",\"AlertWidget\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"valueToCopy\",\"\",\"internalUrlHashParams\",\"\",\"hidden\",\"{{!twilioConversationsCustomComponent.model.browser || twilioConversationsCustomComponent.model.browser === \\\"Chrome\\\"}}\",\"exportFileType\",\"csv\",\"buttonType\",\"action\",\"url\",\"\",\"newWindow\",false,\"exportQuery\",\"\",\"action\",\"\",\"internalUrlQuery\",\"\",\"internalUrlPath\",\"\",\"title\",\"Some browsers have websocket security restrictions\",\"type\",\"error\",\"exportFileName\",\"\",\"description\",\"Use Chrome to demo this application for best results.\",\"buttonText\",\"\"]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",0.9999999999999973,\"col\",0,\"^G\",2.4,\"^H\",4,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1662997794317\",\"^A\",\"~m1663624948470\",\"^B\",\"\",\"^C\",null]]],\"$appStyles\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"$appStyles\",\"^4\",\"setting\",\"^5\",\"AppStyles\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"value\",\"\"]],\"^:\",null,\"^;\",null,\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1662999160583\",\"^A\",\"~m1663718327625\",\"^B\",\"\",\"^C\",null]]],\"emojiPickerCustomComponent\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"emojiPickerCustomComponent\",\"^4\",\"widget\",\"^5\",\"CustomComponentWidget\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"allowTopNavigation\",false,\"heightType\",\"fixed\",\"allowDownloads\",false,\"allowFullscreen\",false,\"allowForms\",false,\"model\",\"{}\",\"hidden\",\"{{emojiPickerVisibility.value}}\",\"allowCamera\",false,\"allowModals\",false,\"allowPopups\",false,\"iframeCode\",\"<!-- Retool custom component model \\n{\\n    emoji (string): < the most recent unicode emoji selected by the user >\\n}\\n-->\\n\\n<!DOCTYPE html>\\n<html>\\n    <head>\\n        <!-- Initialize the emoji picker: https://github.com/nolanlawson/emoji-picker-element/ -->\\n        <script type=\\\"module\\\" src=\\\"https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js\\\"></script>\\n    </head>\\n    <body>\\n        <emoji-picker></emoji-picker>\\n        <script>\\n            // Define an event handler which pushes the selected emoji to the Retool component model\\n            document.querySelector('emoji-picker')\\n                .addEventListener('emoji-click', event => window.Retool.modelUpdate({emoji:event.detail.unicode}))\\n\\n        </script>\\n    </body>\\n</html>\\n\",\"allowMicrophone\",false,\"allowSameOrigin\",true,\"allowPopupsToEscapeSandbox\",false,\"allowPayment\",false,\"allowGeolocation\",false]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",0.6000000000000005,\"col\",8,\"^G\",11.2,\"^H\",4,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1663001179853\",\"^A\",\"~m1663090630364\",\"^B\",\"\",\"^C\",null]]],\"emojiButton\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"emojiButton\",\"^4\",\"widget\",\"^5\",\"IconWidget\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"horizontalAlign\",\"center\",\"clickable\",false,\"hidden\",\"\",\"showInEditor\",false,\"tooltipText\",\"\",\"altText\",\"\",\"icon\",\"bold/mail-smiley-happy-face-alternate\",\"events\",[\"^D\",[[\"^3\",[\"event\",\"click\",\"type\",\"state\",\"method\",\"setValue\",\"pluginId\",\"emojiPickerVisibility\",\"targetId\",null,\"params\",[\"^3\",[\"value\",\"{{!emojiPickerVisibility.value}}\"]],\"waitType\",\"debounce\",\"waitMs\",\"0\"]]]],\"maintainSpaceWhenHidden\",false]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"chatContainer\",\"^E\",\"body\",\"^F\",\"d9fee\",\"row\",11,\"col\",11,\"^G\",0.9999999999999999,\"^H\",1,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1663001465591\",\"^A\",\"~m1663013145833\",\"^B\",\"\",\"^C\",null]]],\"listenForEmojiSelect\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"listenForEmojiSelect\",\"^4\",\"datasource\",\"^5\",\"SqlTransformQuery\",\"^6\",null,\"^7\",\"SQL Transforms\",\"^8\",null,\"^9\",[\"^3\",[\"queryRefreshTime\",\"\",\"lastReceivedFromResourceAt\",null,\"queryDisabledMessage\",\"\",\"successMessage\",\"\",\"queryDisabled\",\"\",\"playgroundQuerySaveId\",\"latest\",\"resourceNameOverride\",\"\",\"runWhenModelUpdates\",true,\"showFailureToaster\",true,\"query\",\"-- Listen for updates to the emoji key on the emojiPickerCustomComponent model to trigger event handlers \\nselect\\n  *\\nfrom\\n  {{emojiPickerCustomComponent.model.emoji}}\",\"playgroundQueryUuid\",\"\",\"playgroundQueryId\",null,\"error\",null,\"privateParams\",[\"^D\",[]],\"runWhenPageLoadsDelay\",\"\",\"data\",null,\"importedQueryInputs\",[\"^3\",[]],\"isImported\",false,\"showSuccessToaster\",true,\"cacheKeyTtl\",\"\",\"metadata\",null,\"changesetObject\",\"\",\"errorTransformer\",\"// The variable 'data' allows you to reference the request's data in the transformer. \\n// example: return data.find(element => element.isError)\\nreturn data.error\",\"confirmationMessage\",null,\"isFetching\",false,\"changeset\",\"\",\"rawData\",null,\"queryTriggerDelay\",\"0\",\"resourceTypeOverride\",null,\"watchedParams\",[\"^D\",[]],\"enableErrorTransformer\",false,\"showLatestVersionUpdatedWarning\",false,\"timestamp\",0,\"importedQueryDefaults\",[\"^3\",[]],\"enableTransformer\",false,\"showUpdateSetValueDynamicallyToggle\",true,\"runWhenPageLoads\",false,\"transformer\",\"// type your code here\\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\\nreturn data\",\"events\",[\"^D\",[[\"^3\",[\"method\",\"setValue\",\"enabled\",\"{{emojiPickerCustomComponent.model.emoji}}\",\"params\",[\"^3\",[\"value\",\"{{messageInput.value + emojiPickerCustomComponent.model.emoji}}\"]],\"targetId\",null,\"pluginId\",\"messageInput\",\"waitType\",\"debounce\",\"event\",\"success\",\"type\",\"widget\",\"waitMs\",\"0\"]],[\"^3\",[\"event\",\"success\",\"type\",\"widget\",\"method\",\"focus\",\"pluginId\",\"messageInput\",\"targetId\",null,\"params\",[\"^3\",[]],\"waitType\",\"debounce\",\"waitMs\",\"0\"]]]],\"queryTimeout\",\"10000\",\"requireConfirmation\",false,\"queryFailureConditions\",\"\",\"changesetIsObject\",false,\"enableCaching\",false,\"allowedGroups\",[\"^D\",[]],\"queryThrottleTime\",\"750\",\"updateSetValueDynamically\",false,\"notificationDuration\",\"\"]],\"^:\",null,\"^;\",null,\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1663001809488\",\"^A\",\"~m1663103918920\",\"^B\",\"js\",\"^C\",null]]],\"listenForMessageDisplayed\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"listenForMessageDisplayed\",\"^4\",\"datasource\",\"^5\",\"SqlTransformQuery\",\"^6\",null,\"^7\",\"SQL Transforms\",\"^8\",null,\"^9\",[\"^3\",[\"queryRefreshTime\",\"\",\"lastReceivedFromResourceAt\",null,\"queryDisabledMessage\",\"\",\"successMessage\",\"\",\"queryDisabled\",\"\",\"playgroundQuerySaveId\",\"latest\",\"resourceNameOverride\",\"\",\"runWhenModelUpdates\",true,\"showFailureToaster\",true,\"query\",\"-- Listen for updates to the data key on the messagesListView component to trigger event handlers \\nselect\\n  *\\nfrom\\n  {{messagesListView.data}}\",\"playgroundQueryUuid\",\"\",\"playgroundQueryId\",null,\"error\",null,\"privateParams\",[\"^D\",[]],\"runWhenPageLoadsDelay\",\"\",\"data\",null,\"importedQueryInputs\",[\"^3\",[]],\"isImported\",false,\"showSuccessToaster\",true,\"cacheKeyTtl\",\"\",\"metadata\",null,\"changesetObject\",\"\",\"errorTransformer\",\"// The variable 'data' allows you to reference the request's data in the transformer. \\n// example: return data.find(element => element.isError)\\nreturn data.error\",\"confirmationMessage\",null,\"isFetching\",false,\"changeset\",\"\",\"rawData\",null,\"queryTriggerDelay\",\"0\",\"resourceTypeOverride\",\"\",\"watchedParams\",[\"^D\",[]],\"enableErrorTransformer\",false,\"showLatestVersionUpdatedWarning\",false,\"timestamp\",0,\"importedQueryDefaults\",[\"^3\",[]],\"enableTransformer\",false,\"showUpdateSetValueDynamicallyToggle\",true,\"runWhenPageLoads\",false,\"transformer\",\"// type your code here\\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\\nreturn data\",\"events\",[\"^D\",[[\"^3\",[\"method\",\"scrollIntoView\",\"params\",[\"^3\",[\"options\",[\"^3\",[\"block\",\"end\"]]]],\"pluginInstance\",\"{{messagesListView.data.length-1}}\",\"targetId\",null,\"pluginId\",\"message\",\"waitType\",\"debounce\",\"event\",\"success\",\"type\",\"widget\",\"waitMs\",\"0\"]]]],\"queryTimeout\",\"10000\",\"requireConfirmation\",false,\"queryFailureConditions\",\"\",\"changesetIsObject\",false,\"enableCaching\",false,\"allowedGroups\",[\"^D\",[]],\"queryThrottleTime\",\"750\",\"updateSetValueDynamically\",false,\"notificationDuration\",\"\"]],\"^:\",null,\"^;\",null,\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1663009974364\",\"^A\",\"~m1663103951422\",\"^B\",\"js\",\"^C\",null]]],\"messageInput\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"messageInput\",\"^4\",\"widget\",\"^5\",\"TextInputWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"spellCheck\",false,\"readOnly\",false,\"iconAfter\",\"\",\"showCharacterCount\",false,\"autoComplete\",false,\"maxLength\",null,\"hidden\",false,\"customValidation\",\"\",\"patternType\",\"\",\"hideValidationMessage\",false,\"textBefore\",\"\",\"validationMessage\",\"\",\"textAfter\",\"\",\"showInEditor\",false,\"showClear\",false,\"pattern\",\"\",\"tooltipText\",\"\",\"labelAlign\",\"left\",\"formDataKey\",\"{{ self.id }}\",\"value\",\"\",\"labelCaption\",\"\",\"labelWidth\",\"33\",\"autoFill\",\"\",\"placeholder\",\"Enter text\",\"label\",\"\",\"_validate\",false,\"labelWidthUnit\",\"%\",\"invalid\",false,\"iconBefore\",\"\",\"minLength\",null,\"inputTooltip\",\"\",\"events\",[\"^D\",[[\"^3\",[\"event\",\"submit\",\"type\",\"datasource\",\"method\",\"trigger\",\"pluginId\",\"addOutboundToHistory\",\"targetId\",null,\"params\",[\"^3\",[]],\"waitType\",\"debounce\",\"waitMs\",\"0\"]]]],\"autoCapitalize\",\"none\",\"loading\",false,\"disabled\",\"{{!addParticipant.data}}\",\"labelPosition\",\"left\",\"labelWrap\",false,\"maintainSpaceWhenHidden\",false,\"required\",false]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"chatContainer\",\"^E\",\"body\",\"^F\",\"d9fee\",\"row\",11,\"col\",0,\"^G\",1,\"^H\",11,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1663012720879\",\"^A\",\"~m1668731507715\",\"^B\",\"\",\"^C\",null]]],\"modelToggle\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"modelToggle\",\"^4\",\"widget\",\"^5\",\"ToggleLinkWidget\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"horizontalAlign\",\"left\",\"iconPosition\",\"before\",\"hidden\",false,\"text\",\"Custom Component Model\",\"showUnderline\",\"never\",\"showInEditor\",false,\"tooltipText\",\"\",\"value\",false,\"allowWrap\",false,\"iconType\",\"caret\",\"events\",[\"^3\",[]],\"disabled\",false,\"maintainSpaceWhenHidden\",false]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"modelViewerContainer\",\"^E\",\"header\",\"^F\",\"\",\"row\",0,\"col\",0,\"^G\",0.6,\"^H\",7,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1663091337533\",\"^A\",\"~m1663108918924\",\"^B\",\"\",\"^C\",null]]],\"image1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"image1\",\"^4\",\"widget\",\"^5\",\"ImageWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"heightType\",\"auto\",\"horizontalAlign\",\"center\",\"srcWidth\",null,\"clickable\",false,\"src\",\"https://d25hn4jiqx5f7l.cloudfront.net/companies/logos/original/retool_1570685791.png?1570685791\",\"hidden\",false,\"srcHeight\",null,\"showInEditor\",false,\"tooltipText\",\"\",\"fit\",\"cover\",\"aspectRatio\",null,\"storageBlobId\",\"\",\"altText\",\"\",\"dbBlobId\",\"\",\"events\",[\"^3\",[]],\"srcType\",\"src\",\"maintainSpaceWhenHidden\",false]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",0,\"col\",9,\"^G\",3,\"^H\",1,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1663624981723\",\"^A\",\"~m1663625003968\",\"^B\",\"\",\"^C\",null]]],\"image2\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"image2\",\"^4\",\"widget\",\"^5\",\"ImageWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"heightType\",\"auto\",\"horizontalAlign\",\"center\",\"srcWidth\",null,\"clickable\",false,\"src\",\"https://cdn.worldvectorlogo.com/logos/twilio.svg\",\"hidden\",false,\"srcHeight\",null,\"showInEditor\",false,\"tooltipText\",\"\",\"fit\",\"cover\",\"aspectRatio\",null,\"storageBlobId\",\"\",\"altText\",\"\",\"dbBlobId\",\"\",\"events\",[\"^3\",[]],\"srcType\",\"src\",\"maintainSpaceWhenHidden\",false]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",0,\"col\",10,\"^G\",3.8,\"^H\",1,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1663624984281\",\"^A\",\"~m1663625047766\",\"^B\",\"\",\"^C\",null]]],\"button1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"button1\",\"^4\",\"widget\",\"^5\",\"ButtonWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"horizontalAlign\",\"stretch\",\"clickable\",false,\"iconAfter\",\"\",\"submitTargetId\",null,\"hidden\",false,\"text\",\"Submit\",\"showInEditor\",false,\"tooltipText\",\"\",\"styleVariant\",\"solid\",\"submit\",false,\"iconBefore\",\"\",\"events\",[\"^D\",[[\"^3\",[\"event\",\"click\",\"type\",\"datasource\",\"method\",\"trigger\",\"pluginId\",\"addParticipant\",\"targetId\",null,\"params\",[\"^3\",[]],\"waitType\",\"debounce\",\"waitMs\",\"0\"]],[\"^3\",[\"event\",\"click\",\"type\",\"widget\",\"method\",\"updateModel\",\"pluginId\",\"twilioConversationsCustomComponent\",\"targetId\",null,\"params\",[\"^3\",[\"model\",\"{customerNumber: {{customerNumberInput.value}} }\"]],\"waitType\",\"debounce\",\"waitMs\",\"0\"]],[\"^3\",[\"event\",\"click\",\"type\",\"widget\",\"method\",\"setValue\",\"pluginId\",\"messageInput\",\"targetId\",null,\"params\",[\"^3\",[]],\"waitType\",\"debounce\",\"waitMs\",\"0\"]]]],\"loading\",false,\"loaderPosition\",\"auto\",\"disabled\",\"{{!customerNumberInput.value || customerNumberInput.validationMessage || !twilioNumberInput.value || twilioNumberInput.validationMessage}}\",\"maintainSpaceWhenHidden\",false]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"smsSettingsContainer\",\"^E\",\"footer\",\"^F\",\"\",\"row\",0,\"col\",8,\"^G\",1,\"^H\",4,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1663629712045\",\"^A\",\"~m1668731404728\",\"^B\",\"\",\"^C\",null]]],\"twilioNumberInput\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"twilioNumberInput\",\"^4\",\"widget\",\"^5\",\"TextInputWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"spellCheck\",false,\"readOnly\",false,\"iconAfter\",\"\",\"showCharacterCount\",false,\"autoComplete\",false,\"maxLength\",null,\"hidden\",false,\"customValidation\",\"\",\"patternType\",\"\",\"hideValidationMessage\",false,\"textBefore\",\"\",\"validationMessage\",\"\",\"textAfter\",\"\",\"showInEditor\",false,\"showClear\",false,\"pattern\",\"\",\"tooltipText\",\"\",\"labelAlign\",\"left\",\"formDataKey\",\"{{ self.id }}\",\"value\",\"\",\"labelCaption\",\"\",\"labelWidth\",\"33\",\"autoFill\",\"\",\"placeholder\",\"Enter value\",\"label\",\"Twilio outbound #\",\"_validate\",false,\"labelWidthUnit\",\"%\",\"invalid\",false,\"iconBefore\",\"\",\"minLength\",null,\"inputTooltip\",\"\",\"events\",[\"^3\",[]],\"autoCapitalize\",\"none\",\"loading\",false,\"disabled\",false,\"labelPosition\",\"left\",\"labelWrap\",false,\"maintainSpaceWhenHidden\",false,\"required\",true]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"smsSettingsContainer\",\"^E\",\"body\",\"^F\",\"b21d2\",\"row\",0,\"col\",0,\"^G\",1,\"^H\",12,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1663716350006\",\"^A\",\"~m1666975877947\",\"^B\",\"\",\"^C\",null]]],\"addParticipant\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"addParticipant\",\"^4\",\"datasource\",\"^5\",\"OpenAPIQuery\",\"^6\",null,\"^7\",\"1701d6b5-6146-420e-8127-b8da8c78b1da\",\"^8\",\"Twilio Conversations API\",\"^9\",[\"^3\",[\"queryRefreshTime\",\"\",\"method\",\"post\",\"operationId\",\"CreateServiceConversationParticipant\",\"lastReceivedFromResourceAt\",null,\"queryDisabledMessage\",\"\",\"server\",null,\"successMessage\",\"\",\"queryDisabled\",\"\",\"path\",\"/v1/Services/{ChatServiceSid}/Conversations/{ConversationSid}/Participants\",\"playgroundQuerySaveId\",\"latest\",\"resourceNameOverride\",\"\",\"runWhenModelUpdates\",false,\"autoPaginate\",false,\"showFailureToaster\",true,\"query\",\"\",\"playgroundQueryUuid\",\"\",\"playgroundQueryId\",null,\"error\",null,\"privateParams\",[\"^D\",[]],\"runWhenPageLoadsDelay\",\"\",\"parameters\",\"{\\\"ConversationSid\\\":\\\"{{ twilioConversationsCustomComponent.model.conversationSid }}\\\",\\\"ChatServiceSid\\\":\\\"{{conversationsServiceIdInput.value}}\\\"}\",\"data\",null,\"specPathOverride\",\"https://specs.retool.com/specs/twilio/twilio_conversations_v1/3.0.1/1.9.0.json\",\"importedQueryInputs\",[\"^3\",[]],\"isImported\",false,\"showSuccessToaster\",true,\"cacheKeyTtl\",\"\",\"metadata\",null,\"requestBodyDynamicStates\",\"{\\\"Attributes\\\":false,\\\"DateCreated\\\":false,\\\"DateUpdated\\\":false,\\\"Identity\\\":false,\\\"MessagingBinding.Address\\\":false,\\\"MessagingBinding.ProjectedAddress\\\":false,\\\"MessagingBinding.ProxyAddress\\\":false,\\\"RoleSid\\\":false}\",\"changesetObject\",\"\",\"requestBody\",\"{\\\"MessagingBinding.Address\\\":\\\"{{customerNumberInput.value}}\\\",\\\"MessagingBinding.ProxyAddress\\\":\\\"{{twilioNumberInput.value}}\\\"}\",\"errorTransformer\",\"// The variable 'data' allows you to reference the request's data in the transformer. \\n// example: return data.find(element => element.isError)\\nreturn data.error\",\"specBasePath\",null,\"confirmationMessage\",null,\"isFetching\",false,\"changeset\",\"\",\"rawData\",null,\"queryTriggerDelay\",\"0\",\"resourceTypeOverride\",\"\",\"watchedParams\",[\"^D\",[]],\"serverVariables\",\"{}\",\"enableErrorTransformer\",false,\"autoPaginateLimit\",500,\"showLatestVersionUpdatedWarning\",false,\"timestamp\",0,\"importedQueryDefaults\",[\"^3\",[]],\"enableTransformer\",false,\"showUpdateSetValueDynamicallyToggle\",true,\"parameterDynamicStates\",\"{\\\"ChatServiceSid\\\":false,\\\"ConversationSid\\\":false,\\\"X-Twilio-Webhook-Enabled\\\":false}\",\"runWhenPageLoads\",false,\"transformer\",\"// type your code here\\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\\nreturn data\",\"events\",[\"^D\",[]],\"queryTimeout\",\"10000\",\"requireConfirmation\",false,\"queryFailureConditions\",\"\",\"changesetIsObject\",false,\"enableCaching\",false,\"allowedGroups\",[\"^D\",[]],\"queryThrottleTime\",\"750\",\"updateSetValueDynamically\",false,\"notificationDuration\",\"\"]],\"^:\",null,\"^;\",null,\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1668730707200\",\"^A\",\"~m1668731089249\",\"^B\",\"writes\",\"^C\",null]]],\"deleteConversations\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"deleteConversations\",\"^4\",\"datasource\",\"^5\",\"OpenAPIQuery\",\"^6\",null,\"^7\",\"1701d6b5-6146-420e-8127-b8da8c78b1da\",\"^8\",\"Twilio Conversations API\",\"^9\",[\"^3\",[\"queryRefreshTime\",\"\",\"method\",\"delete\",\"operationId\",\"DeleteServiceConversation\",\"lastReceivedFromResourceAt\",null,\"queryDisabledMessage\",\"\",\"server\",null,\"successMessage\",\"\",\"queryDisabled\",\"\",\"path\",\"/v1/Services/{ChatServiceSid}/Conversations/{Sid}\",\"playgroundQuerySaveId\",\"latest\",\"resourceNameOverride\",\"\",\"runWhenModelUpdates\",false,\"autoPaginate\",false,\"showFailureToaster\",true,\"query\",\"\",\"playgroundQueryUuid\",\"\",\"playgroundQueryId\",null,\"error\",null,\"privateParams\",[\"^D\",[]],\"runWhenPageLoadsDelay\",\"\",\"parameters\",\"{\\\"Sid\\\":\\\"{{sid}}\\\",\\\"ChatServiceSid\\\":\\\"{{conversationsServiceIdInput.value}}\\\"}\",\"data\",null,\"specPathOverride\",\"https://specs.retool.com/specs/twilio/twilio_conversations_v1/3.0.1/1.9.0.json\",\"importedQueryInputs\",[\"^3\",[]],\"isImported\",false,\"showSuccessToaster\",false,\"cacheKeyTtl\",\"\",\"metadata\",null,\"requestBodyDynamicStates\",\"\",\"changesetObject\",\"\",\"requestBody\",null,\"errorTransformer\",\"// The variable 'data' allows you to reference the request's data in the transformer. \\n// example: return data.find(element => element.isError)\\nreturn data.error\",\"specBasePath\",null,\"confirmationMessage\",null,\"isFetching\",false,\"changeset\",\"\",\"rawData\",null,\"queryTriggerDelay\",\"0\",\"resourceTypeOverride\",null,\"watchedParams\",[\"^D\",[]],\"serverVariables\",\"{}\",\"enableErrorTransformer\",false,\"autoPaginateLimit\",500,\"showLatestVersionUpdatedWarning\",false,\"timestamp\",0,\"importedQueryDefaults\",[\"^3\",[]],\"enableTransformer\",false,\"showUpdateSetValueDynamicallyToggle\",true,\"parameterDynamicStates\",\"{\\\"Sid\\\":false,\\\"X-Twilio-Webhook-Enabled\\\":false}\",\"runWhenPageLoads\",false,\"transformer\",\"// type your code here\\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\\nreturn data\",\"events\",[\"^D\",[]],\"queryTimeout\",\"10000\",\"requireConfirmation\",false,\"queryFailureConditions\",\"\",\"changesetIsObject\",false,\"enableCaching\",false,\"allowedGroups\",[\"^D\",[]],\"queryThrottleTime\",\"750\",\"updateSetValueDynamically\",false,\"notificationDuration\",\"\"]],\"^:\",null,\"^;\",null,\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1668731161763\",\"^A\",\"~m1668731207423\",\"^B\",\"writes\",\"^C\",null]]],\"modal1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"modal1\",\"^4\",\"widget\",\"^5\",\"ModalWidget\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"opened\",false,\"modalOverflowType\",\"scroll\",\"hidden\",\"true\",\"onModalClose\",\"\",\"modalHeightType\",\"auto\",\"tooltipText\",\"\",\"modalHeight\",\"\",\"onModalOpen\",\"\",\"modalWidth\",\"\",\"closeOnOutsideClick\",false,\"loading\",\"\",\"disabled\",\"\",\"buttonText\",\"Open Modal\"]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",11.799999999999997,\"col\",9,\"^G\",1,\"^H\",3,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1668731616328\",\"^A\",\"~m1668731699150\",\"^B\",\"\",\"^C\",null]]],\"text2\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"text2\",\"^4\",\"widget\",\"^5\",\"TextWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"heightType\",\"auto\",\"horizontalAlign\",\"left\",\"hidden\",false,\"imageWidth\",\"fit\",\"showInEditor\",false,\"verticalAlign\",\"center\",\"tooltipText\",\"\",\"value\",\"#### Enter your Twilio Conversations Service SID to get started!\",\"disableMarkdown\",false,\"overflowType\",\"scroll\",\"maintainSpaceWhenHidden\",false]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"modal1\",\"^E\",\"body\",\"^F\",\"\",\"row\",0,\"col\",0,\"^G\",0.6,\"^H\",11,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1668731669093\",\"^A\",\"~m1668731690868\",\"^B\",\"\",\"^C\",null]]],\"conversationsServiceIdInput\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"conversationsServiceIdInput\",\"^4\",\"widget\",\"^5\",\"TextInputWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"spellCheck\",false,\"readOnly\",false,\"iconAfter\",\"\",\"showCharacterCount\",false,\"autoComplete\",false,\"maxLength\",null,\"hidden\",false,\"customValidation\",\"\",\"patternType\",\"\",\"hideValidationMessage\",false,\"textBefore\",\"\",\"validationMessage\",\"\",\"textAfter\",\"\",\"showInEditor\",false,\"showClear\",false,\"pattern\",\"\",\"tooltipText\",\"\",\"labelAlign\",\"left\",\"formDataKey\",\"{{ self.id }}\",\"value\",\"\",\"labelCaption\",\"\",\"labelWidth\",\"33\",\"autoFill\",\"\",\"placeholder\",\"Enter Conversations service SID\",\"label\",\"\",\"_validate\",false,\"labelWidthUnit\",\"%\",\"invalid\",false,\"iconBefore\",\"\",\"minLength\",null,\"inputTooltip\",\"\",\"events\",[\"^D\",[]],\"autoCapitalize\",\"none\",\"loading\",false,\"disabled\",false,\"labelPosition\",\"left\",\"labelWrap\",false,\"maintainSpaceWhenHidden\",false,\"required\",true]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"modal1\",\"^E\",\"body\",\"^F\",\"\",\"row\",0.6,\"col\",0,\"^G\",1,\"^H\",12,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1668731737593\",\"^A\",\"~m1668731746072\",\"^B\",\"\",\"^C\",null]]],\"button2\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"button2\",\"^4\",\"widget\",\"^5\",\"ButtonWidget2\",\"^6\",null,\"^7\",null,\"^8\",null,\"^9\",[\"^3\",[\"horizontalAlign\",\"stretch\",\"clickable\",false,\"iconAfter\",\"\",\"submitTargetId\",null,\"hidden\",false,\"text\",\"Submit\",\"showInEditor\",false,\"tooltipText\",\"\",\"styleVariant\",\"solid\",\"submit\",false,\"iconBefore\",\"\",\"events\",[\"^D\",[[\"^3\",[\"event\",\"click\",\"type\",\"datasource\",\"method\",\"trigger\",\"pluginId\",\"initialize\",\"targetId\",null,\"params\",[\"^3\",[]],\"waitType\",\"debounce\",\"waitMs\",\"0\"]],[\"^3\",[\"event\",\"click\",\"type\",\"widget\",\"method\",\"close\",\"pluginId\",\"modal1\",\"targetId\",null,\"params\",[\"^3\",[]],\"waitType\",\"debounce\",\"waitMs\",\"0\"]]]],\"loading\",false,\"loaderPosition\",\"auto\",\"disabled\",\"{{!conversationsServiceIdInput.value}}\",\"maintainSpaceWhenHidden\",false]],\"^:\",[\"^3\",[]],\"^;\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^?\",\"modal1\",\"^E\",\"body\",\"^F\",\"\",\"row\",1.6,\"col\",7,\"^G\",1,\"^H\",5,\"^I\",0]]],\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1668731757179\",\"^A\",\"~m1668731864850\",\"^B\",\"\",\"^C\",null]]],\"popModal\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"popModal\",\"^4\",\"datasource\",\"^5\",\"JavascriptQuery\",\"^6\",null,\"^7\",\"JavascriptQuery\",\"^8\",null,\"^9\",[\"^3\",[\"queryRefreshTime\",\"\",\"lastReceivedFromResourceAt\",null,\"queryDisabledMessage\",\"\",\"successMessage\",\"\",\"queryDisabled\",\"\",\"playgroundQuerySaveId\",\"latest\",\"resourceNameOverride\",\"\",\"runWhenModelUpdates\",false,\"showFailureToaster\",true,\"query\",\"modal1.open()\",\"playgroundQueryUuid\",\"\",\"playgroundQueryId\",null,\"error\",null,\"privateParams\",[\"^D\",[]],\"runWhenPageLoadsDelay\",\"\",\"data\",null,\"importedQueryInputs\",[\"^3\",[]],\"isImported\",false,\"showSuccessToaster\",false,\"cacheKeyTtl\",\"\",\"metadata\",null,\"changesetObject\",\"\",\"errorTransformer\",\"// The variable 'data' allows you to reference the request's data in the transformer. \\n// example: return data.find(element => element.isError)\\nreturn data.error\",\"confirmationMessage\",null,\"isFetching\",false,\"changeset\",\"\",\"rawData\",null,\"queryTriggerDelay\",\"0\",\"resourceTypeOverride\",null,\"watchedParams\",[\"^D\",[]],\"enableErrorTransformer\",false,\"showLatestVersionUpdatedWarning\",false,\"timestamp\",0,\"importedQueryDefaults\",[\"^3\",[]],\"enableTransformer\",false,\"showUpdateSetValueDynamicallyToggle\",true,\"runWhenPageLoads\",true,\"transformer\",\"// type your code here\\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\\nreturn data\",\"events\",[\"^D\",[]],\"queryTimeout\",\"10000\",\"requireConfirmation\",false,\"queryFailureConditions\",\"\",\"changesetIsObject\",false,\"enableCaching\",false,\"allowedGroups\",[\"^D\",[]],\"queryThrottleTime\",\"750\",\"updateSetValueDynamically\",false,\"notificationDuration\",\"\"]],\"^:\",null,\"^;\",null,\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",\"\",\"^@\",\"~m1668731911158\",\"^A\",\"~m1668731929591\",\"^B\",\"js\",\"^C\",null]]]]],\"^@\",null,\"version\",\"2.103.2\",\"appThemeId\",null,\"preloadedAppJavaScript\",null,\"preloadedAppJSLinks\",[],\"testEntities\",[],\"tests\",[],\"appStyles\",\"\",\"responsiveLayoutDisabled\",false,\"loadingIndicatorsDisabled\",false,\"urlFragmentDefinitions\",[\"^D\",[]],\"pageLoadValueOverrides\",[\"^D\",[]],\"customDocumentTitle\",\"\",\"customDocumentTitleEnabled\",false,\"customShortcuts\",[],\"isGlobalWidget\",false,\"isMobileApp\",false,\"multiScreenMobileApp\",false,\"folders\",[\"^D\",[\"gets\",\"writes\",\"js\",\"tempState\"]],\"queryStatusVisibility\",true,\"markdownLinkBehavior\",\"never\",\"inAppRetoolPillAppearance\",\"NO_OVERRIDE\",\"rootScreen\",null,\"instrumentationEnabled\",false,\"experimentalPerfFeatures\",[\"^ \",\"batchCommitModelEnabled\",false,\"skipDepCycleCheckingEnabled\",false,\"serverDepGraphEnabled\",false,\"useRuntimeV2\",false],\"experimentalStabilityFeatures\",[\"^ \",\"lockModelForUpdates\",false],\"experimentalDataTabEnabled\",false]]]"},"changesRecord":[{"type":"MIGRATIONS_UP_TO_DATE","payload":{"migratedAppTemplate":{"tests":[],"folders":["gets","writes","js","tempState"],"plugins":{"$main":{"id":"$main","type":"frame","style":{},"folder":"","screen":null,"subtype":"Frame","tabIndex":null,"template":{"type":"main","sticky":false},"container":"","createdAt":"2022-08-22T19:19:13.770Z","namespace":null,"position2":null,"updatedAt":"2022-08-22T19:19:13.770Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"text1":{"id":"text1","type":"widget","style":{},"folder":"","screen":null,"subtype":"TextWidget2","tabIndex":null,"template":{"value":"### SMS with Twilio Conversations\n###### ℹ️ This demo uses the Twilio Conversations JS SDK to establish bi-directional messaging with an SMS client.\n","hidden":false,"heightType":"auto","imageWidth":"fit","tooltipText":"","overflowType":"scroll","showInEditor":false,"verticalAlign":"top","disableMarkdown":false,"horizontalAlign":"left","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-08-23T23:25:46.482Z","namespace":null,"position2":{"col":0,"row":0.2,"width":4,"height":0.6000000000000001,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-09-13T22:44:17.579Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"text2":{"id":"text2","type":"widget","style":{},"folder":"","screen":null,"subtype":"TextWidget2","tabIndex":null,"template":{"value":"#### Enter your Twilio Conversations Service SID to get started!","hidden":false,"heightType":"auto","imageWidth":"fit","tooltipText":"","overflowType":"scroll","showInEditor":false,"verticalAlign":"center","disableMarkdown":false,"horizontalAlign":"left","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-11-18T00:34:29.093Z","namespace":null,"position2":{"col":0,"row":0,"width":11,"height":0.6,"tabNum":0,"rowGroup":"body","container":"modal1","subcontainer":""},"updatedAt":"2022-11-18T00:34:50.868Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"alert1":{"id":"alert1","type":"widget","style":{},"folder":"","screen":null,"subtype":"AlertWidget","tabIndex":null,"template":{"url":"","type":"error","title":"Error","action":"","events":[],"hidden":"{{!twilioConversationsCustomComponent.model.error}}","newWindow":false,"buttonText":"","buttonType":"action","description":"{{twilioConversationsCustomComponent.model.error}}","exportQuery":"","valueToCopy":"","exportFileName":"","exportFileType":"csv","internalUrlPath":"","internalUrlQuery":"","internalUrlHashParams":""},"container":"","createdAt":"2022-06-09T16:32:45.293Z","namespace":null,"position2":{"col":6,"row":0,"width":6,"height":1,"tabNum":0,"rowGroup":"body","container":"","subcontainer":"header"},"updatedAt":"2022-09-13T20:56:40.772Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"alert3":{"id":"alert3","type":"widget","style":{},"folder":"","screen":null,"subtype":"AlertWidget","tabIndex":null,"template":{"url":"","type":"error","title":"Some browsers have websocket security restrictions","action":"","hidden":"{{!twilioConversationsCustomComponent.model.browser || twilioConversationsCustomComponent.model.browser === \"Chrome\"}}","newWindow":false,"buttonText":"","buttonType":"action","description":"Use Chrome to demo this application for best results.","exportQuery":"","valueToCopy":"","exportFileName":"","exportFileType":"csv","internalUrlPath":"","internalUrlQuery":"","internalUrlHashParams":""},"container":"","createdAt":"2022-09-12T15:49:54.317Z","namespace":null,"position2":{"col":0,"row":0.9999999999999973,"width":4,"height":2.4,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-09-19T22:02:28.470Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"image1":{"id":"image1","type":"widget","style":{},"folder":"","screen":null,"subtype":"ImageWidget2","tabIndex":null,"template":{"fit":"cover","src":"https://d25hn4jiqx5f7l.cloudfront.net/companies/logos/original/retool_1570685791.png?1570685791","events":{},"hidden":false,"altText":"","srcType":"src","dbBlobId":"","srcWidth":null,"clickable":false,"srcHeight":null,"heightType":"auto","aspectRatio":null,"tooltipText":"","showInEditor":false,"storageBlobId":"","horizontalAlign":"center","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-09-19T22:03:01.723Z","namespace":null,"position2":{"col":9,"row":0,"width":1,"height":3,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-09-19T22:03:23.968Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"image2":{"id":"image2","type":"widget","style":{},"folder":"","screen":null,"subtype":"ImageWidget2","tabIndex":null,"template":{"fit":"cover","src":"https://cdn.worldvectorlogo.com/logos/twilio.svg","events":{},"hidden":false,"altText":"","srcType":"src","dbBlobId":"","srcWidth":null,"clickable":false,"srcHeight":null,"heightType":"auto","aspectRatio":null,"tooltipText":"","showInEditor":false,"storageBlobId":"","horizontalAlign":"center","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-09-19T22:03:04.281Z","namespace":null,"position2":{"col":10,"row":0,"width":1,"height":3.8,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-09-19T22:04:07.766Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"modal1":{"id":"modal1","type":"widget","style":{},"folder":"","screen":null,"subtype":"ModalWidget","tabIndex":null,"template":{"hidden":"true","opened":false,"loading":"","disabled":"","buttonText":"Open Modal","modalWidth":"","modalHeight":"","onModalOpen":"","tooltipText":"","onModalClose":"","modalHeightType":"auto","modalOverflowType":"scroll","closeOnOutsideClick":false},"container":"","createdAt":"2022-11-18T00:33:36.328Z","namespace":null,"position2":{"col":9,"row":11.799999999999997,"width":3,"height":1,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-11-18T00:34:59.150Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"$header":{"id":"$header","type":"frame","style":{},"folder":"","screen":null,"subtype":"Frame","tabIndex":null,"template":{"type":"header","sticky":true},"container":"","createdAt":"2022-08-22T19:19:13.771Z","namespace":null,"position2":null,"updatedAt":"2022-08-22T19:19:13.771Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"button1":{"id":"button1","type":"widget","style":{},"folder":"","screen":null,"subtype":"ButtonWidget2","tabIndex":null,"template":{"text":"Submit","events":[{"type":"datasource","event":"click","method":"trigger","params":{},"waitMs":"0","pluginId":"addParticipant","targetId":null,"waitType":"debounce"},{"type":"widget","event":"click","method":"updateModel","params":{"model":"{customerNumber: {{customerNumberInput.value}} }"},"waitMs":"0","pluginId":"twilioConversationsCustomComponent","targetId":null,"waitType":"debounce"},{"type":"widget","event":"click","method":"setValue","params":{},"waitMs":"0","pluginId":"messageInput","targetId":null,"waitType":"debounce"}],"hidden":false,"submit":false,"loading":false,"disabled":"{{!customerNumberInput.value || customerNumberInput.validationMessage || !twilioNumberInput.value || twilioNumberInput.validationMessage}}","clickable":false,"iconAfter":"","iconBefore":"","tooltipText":"","showInEditor":false,"styleVariant":"solid","loaderPosition":"auto","submitTargetId":null,"horizontalAlign":"stretch","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-09-19T23:21:52.045Z","namespace":null,"position2":{"col":8,"row":0,"width":4,"height":1,"tabNum":0,"rowGroup":"footer","container":"smsSettingsContainer","subcontainer":""},"updatedAt":"2022-11-18T00:30:04.728Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"button2":{"id":"button2","type":"widget","style":{},"folder":"","screen":null,"subtype":"ButtonWidget2","tabIndex":null,"template":{"text":"Submit","events":[{"type":"datasource","event":"click","method":"trigger","params":{},"waitMs":"0","pluginId":"initialize","targetId":null,"waitType":"debounce"},{"type":"widget","event":"click","method":"close","params":{},"waitMs":"0","pluginId":"modal1","targetId":null,"waitType":"debounce"}],"hidden":false,"submit":false,"loading":false,"disabled":"{{!conversationsServiceIdInput.value}}","clickable":false,"iconAfter":"","iconBefore":"","tooltipText":"","showInEditor":false,"styleVariant":"solid","loaderPosition":"auto","submitTargetId":null,"horizontalAlign":"stretch","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-11-18T00:35:57.179Z","namespace":null,"position2":{"col":7,"row":1.6,"width":5,"height":1,"tabNum":0,"rowGroup":"body","container":"modal1","subcontainer":""},"updatedAt":"2022-11-18T00:37:44.850Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"message":{"id":"message","type":"widget","style":{},"folder":"","screen":null,"subtype":"HTMLWidget","tabIndex":null,"template":{"css":"/* CSS courtesy of https://codepen.io/AllThingsSmitty/pen/jommGQ */\n\n.imessage {\n  background-color: #fff;\n  border-radius: 0.25rem;\n  display: flex;\n  flex-direction: column;\n  font-family: -apple-system, system-ui, BlinkMacSystemFont;\n  font-size: 1.25rem;\n  margin: 0 auto 1rem;\n  max-width: 600px;\n}\n\n.imessage p {\n  border-radius: 1.15rem;\n  line-height: 1.25;\n  max-width: 75%;\n  padding: 0.5rem .875rem;\n  position: relative;\n  word-wrap: break-word;\n}\n\n.imessage p::before,\n.imessage p::after {\n  bottom: -0.1rem;\n  content: \"\";\n  height: 1rem;\n  position: absolute;\n}\n\np.from-me {\n  align-self: flex-end;\n  background-color: #248bf5;\n  color: #fff; \n}\n\np.from-me::before {\n  border-bottom-left-radius: 0.8rem 0.7rem;\n  border-right: 1rem solid #248bf5;\n  right: -0.35rem;\n  transform: translate(0, -0.1rem);\n}\n\np.from-me::after {\n  background-color: #fff;\n  border-bottom-left-radius: 0.5rem;\n  right: -40px;\n  transform:translate(-30px, -2px);\n  width: 10px;\n}\n\np[class^=\"from-\"] {\n  margin: 0.5rem 0;\n  width: fit-content;\n}\n\np.from-me ~ p.from-me {\n  margin: 0.25rem 0 0;\n}\n\np.from-me ~ p.from-me:not(:last-child) {\n  margin: 0.25rem 0 0;\n}\n\np.from-me ~ p.from-me:last-child {\n  margin-bottom: 0.5rem;\n}\n\np.from-them {\n  align-items: flex-start;\n  background-color: #e5e5ea;\n  color: #000;\n}\n\np.from-them:before {\n  border-bottom-right-radius: 0.8rem 0.7rem;\n  border-left: 1rem solid #e5e5ea;\n  left: -0.35rem;\n  transform: translate(0, -0.1rem);\n}\n\np.from-them::after {\n  background-color: #fff;\n  border-bottom-right-radius: 0.5rem;\n  left: 20px;\n  transform: translate(-30px, -2px);\n  width: 10px;\n}\n\np[class^=\"from-\"].emoji {\n  background: none;\n  font-size: 2.5rem;\n}\n\np[class^=\"from-\"].emoji::before {\n  content: none;\n}\n\n.no-tail::before {\n  display: none;\n}\n\n.margin-b_none {\n  margin-bottom: 0 !important;\n}\n\n.margin-b_one {\n  margin-bottom: 1rem !important;\n}\n\n.margin-t_one {\n  margin-top: 1rem !important;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* general styling */\n@font-face {\n  font-family: \"SanFrancisco\";\n  src:\n    url(\"https://cdn.rawgit.com/AllThingsSmitty/fonts/25983b71/SanFrancisco/sanfranciscodisplay-regular-webfont.woff2\") format(\"woff2\"),\n    url(\"https://cdn.rawgit.com/AllThingsSmitty/fonts/25983b71/SanFrancisco/sanfranciscodisplay-regular-webfont.woff\") format(\"woff\");\n}\n\n._retool-messagesListView {  \n  font-family: -apple-system, \n    BlinkMacSystemFont, \n    \"Segoe UI\", \n    Roboto, \n    Oxygen-Sans, \n    Ubuntu, \n    Cantarell, \n    \"Helvetica Neue\", \n    sans-serif;\n  font-weight: normal;\n  margin: 0;\n}\n\n._retool-messageListView.container {\n  margin: 0 auto;\n  max-width: 600px;\n  padding: 1rem;\n}\n\n._retool-messageListView h1 {\n  font-weight: normal;\n  margin-bottom: 0.5rem;\n}\n\n._retool-messageListView h2 {\n  border-bottom: 1px solid #e5e5ea;\n  color: #666;\n  font-weight: normal;\n  margin-top: 0;\n  padding-bottom: 1.5rem;\n}\n\n.comment {\n  color: #222;\n  font-size: 1.25rem;\n  line-height: 1.5;\n  margin-bottom: 1.25rem;\n  max-width: 100%;\n  padding: 0;\n}\n\n@media screen and (max-width: 800px) {\n  ._retool-messageListView {\n    margin: 0 0.5rem;\n  }\n\n  ._retool-messageListView.container {\n    padding: 0.5rem;\n  }\n\n  .imessage {\n    font-size: 1.05rem;\n    margin: 0 auto 1rem;\n    max-width: 600px;\n    padding: 0.25rem 0.875rem;\n  }\n\n  .imessage p {\n    margin: 0.5rem 0;\n  }\n}","html":"<div class=\"imessage\">\n  <p class={{ messageHistory.value[i].direction === \"outbound\" ? 'from-me' : 'from-them'}} id={{\"message\"}}> {{ messageHistory.value[i].message }}\n  </p>   \n</div>","hidden":false,"tooltipText":"","showInEditor":false,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-08-23T09:05:55.927Z","namespace":null,"position2":{"col":0,"row":0,"width":12,"height":0.2,"tabNum":0,"rowGroup":"body","container":"messagesListView","subcontainer":""},"updatedAt":"2022-09-20T23:24:26.077Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"popModal":{"id":"popModal","type":"datasource","style":null,"folder":"js","screen":null,"subtype":"JavascriptQuery","tabIndex":null,"template":{"data":null,"error":null,"query":"modal1.open()","events":[],"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"cacheKeyTtl":"","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","queryTimeout":"10000","allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":true,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":false,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":false,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":null,"importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"queryFailureConditions":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-11-18T00:38:31.158Z","namespace":null,"position2":null,"updatedAt":"2022-11-18T00:38:49.591Z","resourceName":"JavascriptQuery","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"$appStyles":{"id":"$appStyles","type":"setting","style":null,"folder":"","screen":null,"subtype":"AppStyles","tabIndex":null,"template":{"value":""},"container":"","createdAt":"2022-09-12T16:12:40.583Z","namespace":null,"position2":null,"updatedAt":"2022-09-20T23:58:47.625Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"initialize":{"id":"initialize","type":"datasource","style":null,"folder":"js","screen":null,"subtype":"JavascriptQuery","tabIndex":null,"template":{"data":null,"error":null,"query":"// Usage: Prepare the app for first run by deleting old Conversations, passing a Twilio access token to twilioConversationsCustomComponent, and unhiding UI elements.\n// Triggered by: page load\n\n// Get all Twilio Conversations\nconst data = await getConversations.trigger();\n\nconsole.log(data)\n\n// Get a list of all Conversation SIDs\nconst conversationSids = data.conversations.map(\n  (conversation) => conversation.sid\n);\n\n// Delete all Conversations, passing each Conversation SID to the deleteConverstions query using additionalScope:\n// https://docs.retool.com/docs/scripting-retool#trigger-a-query\nfor (const sid of conversationSids) {\n  await deleteConversations.trigger({ additionalScope: { sid: sid } });\n}\n\n// Get a new chat-enabled Twilio access token\nawait getChatToken.trigger();\n\n// Inform the twilioConversationsCustomComponent that all pending conversations have been deleted\ntwilioConversationsCustomComponent.updateModel({ conversationsCleared: true });\n\n// Toggle UI component display to enable normal app usage\nloadingSpinner.setHidden(true);\nsmsSettingsContainer.setHidden(false);\nchatContainer.setHidden(false);\nmodelViewerContainer.setHidden(false);\n","events":[{"type":"widget","event":"success","method":"setValue","params":{"value":"\" \""},"waitMs":"0","pluginId":"messageInput","targetId":null,"waitType":"debounce"}],"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"cacheKeyTtl":"","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","queryTimeout":"10000","allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":false,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":false,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":null,"importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"queryFailureConditions":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-09-07T16:23:10.505Z","namespace":null,"position2":null,"updatedAt":"2022-11-18T00:42:22.873Z","resourceName":"JavascriptQuery","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"emojiButton":{"id":"emojiButton","type":"widget","style":{},"folder":"","screen":null,"subtype":"IconWidget","tabIndex":null,"template":{"icon":"bold/mail-smiley-happy-face-alternate","events":[{"type":"state","event":"click","method":"setValue","params":{"value":"{{!emojiPickerVisibility.value}}"},"waitMs":"0","pluginId":"emojiPickerVisibility","targetId":null,"waitType":"debounce"}],"hidden":"","altText":"","clickable":false,"tooltipText":"","showInEditor":false,"horizontalAlign":"center","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-09-12T16:51:05.591Z","namespace":null,"position2":{"col":11,"row":11,"width":1,"height":0.9999999999999999,"tabNum":0,"rowGroup":"body","container":"chatContainer","subcontainer":"d9fee"},"updatedAt":"2022-09-12T20:05:45.833Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"modelToggle":{"id":"modelToggle","type":"widget","style":{},"folder":"","screen":null,"subtype":"ToggleLinkWidget","tabIndex":null,"template":{"text":"Custom Component Model","value":false,"events":{},"hidden":false,"disabled":false,"iconType":"caret","allowWrap":false,"tooltipText":"","iconPosition":"before","showInEditor":false,"showUnderline":"never","horizontalAlign":"left","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-09-13T17:48:57.533Z","namespace":null,"position2":{"col":0,"row":0,"width":7,"height":0.6,"tabNum":0,"rowGroup":"header","container":"modelViewerContainer","subcontainer":""},"updatedAt":"2022-09-13T22:41:58.924Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"getChatToken":{"id":"getChatToken","type":"datasource","style":null,"folder":"gets","screen":null,"subtype":"RESTQuery","tabIndex":null,"template":{"body":"","data":null,"type":"GET","error":null,"query":"","events":[{"type":"widget","event":"success","method":"updateModel","params":{"model":"{token: {{ getChatToken.data.token }} } "},"waitMs":"0","pluginId":"twilioConversationsCustomComponent","targetId":null,"waitType":"debounce"}],"cookies":"","headers":"","rawData":null,"bodyType":"json","metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"cacheKeyTtl":"","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","queryTimeout":"10000","allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","paginationLimit":"","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"changesetIsObject":false,"enableTransformer":false,"paginationEnabled":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":false,"confirmationMessage":null,"importedQueryInputs":{},"paginationDataField":"","playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":false,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":null,"importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"queryFailureConditions":"","paginationPaginationField":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-09-07T00:06:34.496Z","namespace":null,"position2":null,"updatedAt":"2022-09-19T22:52:10.314Z","resourceName":"d5c8102b-26f6-453b-8406-9da5c323c76d","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"messageInput":{"id":"messageInput","type":"widget","style":{},"folder":"","screen":null,"subtype":"TextInputWidget2","tabIndex":null,"template":{"label":"","value":"","events":[{"type":"datasource","event":"submit","method":"trigger","params":{},"waitMs":"0","pluginId":"addOutboundToHistory","targetId":null,"waitType":"debounce"}],"hidden":false,"invalid":false,"loading":false,"pattern":"","autoFill":"","disabled":"{{!addParticipant.data}}","readOnly":false,"required":false,"_validate":false,"iconAfter":"","labelWrap":false,"maxLength":null,"minLength":null,"showClear":false,"textAfter":"","iconBefore":"","labelAlign":"left","labelWidth":"33","spellCheck":false,"textBefore":"","formDataKey":"{{ self.id }}","patternType":"","placeholder":"Enter text","tooltipText":"","autoComplete":false,"inputTooltip":"","labelCaption":"","showInEditor":false,"labelPosition":"left","autoCapitalize":"none","labelWidthUnit":"%","customValidation":"","validationMessage":"","showCharacterCount":false,"hideValidationMessage":false,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-09-12T19:58:40.879Z","namespace":null,"position2":{"col":0,"row":11,"width":11,"height":1,"tabNum":0,"rowGroup":"body","container":"chatContainer","subcontainer":"d9fee"},"updatedAt":"2022-11-18T00:31:47.715Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"chatContainer":{"id":"chatContainer","type":"widget","style":{},"folder":"","screen":null,"subtype":"ContainerWidget2","tabIndex":null,"template":{"_ids":["d9fee"],"views":[],"events":{},"hidden":"true","labels":[],"_labels":[""],"hovered":false,"loading":false,"disabled":false,"itemMode":"static","showBody":true,"viewKeys":[],"_viewKeys":["View 1"],"clickable":false,"heightType":"fixed","showFooter":false,"showHeader":true,"transition":"none","iconByIndex":[],"tooltipText":"","_iconByIndex":[""],"overflowType":"hidden","showInEditor":false,"hiddenByIndex":[],"hoistFetching":true,"_hiddenByIndex":[""],"currentViewKey":null,"tooltipByIndex":[],"_tooltipByIndex":[""],"disabledByIndex":[],"_disabledByIndex":[""],"currentViewIndex":null,"iconPositionByIndex":[],"_iconPositionByIndex":[""],"_hasMigratedNestedItems":true,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-08-23T08:59:35.602Z","namespace":null,"position2":{"col":4,"row":1.6653345369377348e-16,"width":4,"height":13.799999999999999,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-09-08T16:46:44.789Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"jsonExplorer1":{"id":"jsonExplorer1","type":"widget","style":{},"folder":"","screen":null,"subtype":"JSONExplorerWidget","tabIndex":null,"template":{"html":false,"value":"{{twilioConversationsCustomComponent.model}}","expandNodes":true},"container":"","createdAt":"2022-09-07T16:52:07.052Z","namespace":null,"position2":{"col":0,"row":0,"width":12,"height":12.200000000000001,"tabNum":0,"rowGroup":"body","container":"modelViewerContainer","subcontainer":"07571"},"updatedAt":"2022-09-13T20:56:40.788Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"addParticipant":{"id":"addParticipant","type":"datasource","style":null,"folder":"writes","screen":null,"subtype":"OpenAPIQuery","tabIndex":null,"template":{"data":null,"path":"/v1/Services/{ChatServiceSid}/Conversations/{ConversationSid}/Participants","error":null,"query":"","events":[],"method":"post","server":null,"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"parameters":"{\"ConversationSid\":\"{{ twilioConversationsCustomComponent.model.conversationSid }}\",\"ChatServiceSid\":\"{{conversationsServiceIdInput.value}}\"}","cacheKeyTtl":"","operationId":"CreateServiceConversationParticipant","requestBody":"{\"MessagingBinding.Address\":\"{{customerNumberInput.value}}\",\"MessagingBinding.ProxyAddress\":\"{{twilioNumberInput.value}}\"}","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","autoPaginate":false,"queryTimeout":"10000","specBasePath":null,"allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","serverVariables":"{}","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"specPathOverride":"https://specs.retool.com/specs/twilio/twilio_conversations_v1/3.0.1/1.9.0.json","autoPaginateLimit":500,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":true,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":false,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":"","importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"parameterDynamicStates":"{\"ChatServiceSid\":false,\"ConversationSid\":false,\"X-Twilio-Webhook-Enabled\":false}","queryFailureConditions":"","requestBodyDynamicStates":"{\"Attributes\":false,\"DateCreated\":false,\"DateUpdated\":false,\"Identity\":false,\"MessagingBinding.Address\":false,\"MessagingBinding.ProjectedAddress\":false,\"MessagingBinding.ProxyAddress\":false,\"RoleSid\":false}","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-11-18T00:18:27.200Z","namespace":null,"position2":null,"updatedAt":"2022-11-18T00:24:49.249Z","resourceName":"1701d6b5-6146-420e-8127-b8da8c78b1da","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"loadingSpinner":{"id":"loadingSpinner","type":"widget","style":{},"folder":"","screen":null,"subtype":"HTMLWidget","tabIndex":null,"template":{"css":".flexbox {\n  justify-content:center;\n  display:flex;\n}\n.loader {\n            \n  \t\t\t\t\tborder: 16px solid transparent;\n            border-top: 16px solid blue;\n            border-radius: 50%;\n            width: 120px;\n            height: 120px;\n            animation: spinloader 2s linear infinite;\n        }\n  \n        .loader img {\n            height: 120px;\n            width: 120px;\n            animation: spinlogo 2s linear infinite;\n        }\n  \n        @keyframes spinloader {\n            0% {\n                transform: rotate(0deg);\n            }\n  \n            100% {\n                transform: rotate(360deg);\n            }\n        }\n","html":"<div class=\"flexbox\">\n  <div style=\"font-family:sans-serif;\">Twilio Conversations initializing...\n\t<div class=\"loader\" />\n</div>","hidden":false,"tooltipText":"","showInEditor":false,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-09-08T16:45:34.456Z","namespace":null,"position2":{"col":5,"row":17.2,"width":3,"height":0.2,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-09-19T22:32:07.911Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"messageHistory":{"id":"messageHistory","type":"state","style":null,"folder":"tempState","screen":null,"subtype":"State","tabIndex":null,"template":{"value":"[]","persistValue":false,"persistedValueKey":"","_persistedValueGetter":null,"_persistedValueSetter":null},"container":"","createdAt":"2022-09-07T22:30:38.245Z","namespace":null,"position2":null,"updatedAt":"2022-09-07T22:35:33.805Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"containerTitle1":{"id":"containerTitle1","type":"widget","style":{},"folder":"","screen":null,"subtype":"TextWidget2","tabIndex":null,"template":{"value":"#### Real-time SMS","hidden":false,"heightType":"auto","imageWidth":"fit","tooltipText":"","overflowType":"scroll","showInEditor":false,"verticalAlign":"center","disableMarkdown":false,"horizontalAlign":"left","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-08-23T08:59:35.882Z","namespace":null,"position2":{"col":0,"row":0,"width":12,"height":0.6,"tabNum":0,"rowGroup":"header","container":"chatContainer","subcontainer":""},"updatedAt":"2022-09-19T22:06:21.934Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"containerTitle2":{"id":"containerTitle2","type":"widget","style":{},"folder":"","screen":null,"subtype":"TextWidget2","tabIndex":null,"template":{"value":"#### SMS settings","hidden":false,"heightType":"auto","imageWidth":"fit","tooltipText":"","overflowType":"scroll","showInEditor":false,"verticalAlign":"center","disableMarkdown":false,"horizontalAlign":"left","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-08-23T22:39:28.735Z","namespace":null,"position2":{"col":0,"row":0,"width":12,"height":0.6,"tabNum":0,"rowGroup":"header","container":"smsSettingsContainer","subcontainer":""},"updatedAt":"2022-08-23T22:39:43.238Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"getConversations":{"id":"getConversations","type":"datasource","style":null,"folder":"gets","screen":null,"subtype":"OpenAPIQuery","tabIndex":null,"template":{"data":null,"path":"/v1/Services/{ChatServiceSid}/Conversations","error":null,"query":"","events":[],"method":"get","server":null,"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"parameters":"{\"ChatServiceSid\":\"{{conversationsServiceIdInput.value}}\"}","cacheKeyTtl":"","operationId":"ListServiceConversation","requestBody":null,"transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","autoPaginate":false,"queryTimeout":"10000","specBasePath":null,"allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","serverVariables":"{}","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"specPathOverride":"https://specs.retool.com/specs/twilio/twilio_conversations_v1/3.0.1/1.9.0.json","autoPaginateLimit":500,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":false,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":false,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":"","importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"parameterDynamicStates":"{\"PageSize\":false}","queryFailureConditions":"","requestBodyDynamicStates":"{\"Attributes\":false,\"DateCreated\":false,\"DateUpdated\":false,\"FriendlyName\":false,\"MessagingServiceSid\":false,\"State\":false,\"Timers.Closed\":false,\"Timers.Inactive\":false,\"UniqueName\":false}","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-09-07T16:21:25.284Z","namespace":null,"position2":null,"updatedAt":"2022-11-18T00:56:03.772Z","resourceName":"1701d6b5-6146-420e-8127-b8da8c78b1da","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"messagesListView":{"id":"messagesListView","type":"widget","style":{},"folder":"","screen":null,"subtype":"ListViewWidget","tabIndex":null,"template":{"data":"","instances":"{{ messageHistory.value.length }}","heightType":"fixed","itemHeight":"3","showBorder":false,"formDataKey":"{{ self.id }}","overflowType":"scroll","showDropShadow":false,"dynamicHeightsEnabled":true},"container":"","createdAt":"2022-08-23T09:01:37.241Z","namespace":null,"position2":{"col":0,"row":-3.885780586188048e-16,"width":12,"height":10.8,"tabNum":0,"rowGroup":"body","container":"chatContainer","subcontainer":"d9fee"},"updatedAt":"2022-09-12T18:30:36.029Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"twilioNumberInput":{"id":"twilioNumberInput","type":"widget","style":{},"folder":"","screen":null,"subtype":"TextInputWidget2","tabIndex":null,"template":{"label":"Twilio outbound #","value":"","events":{},"hidden":false,"invalid":false,"loading":false,"pattern":"","autoFill":"","disabled":false,"readOnly":false,"required":true,"_validate":false,"iconAfter":"","labelWrap":false,"maxLength":null,"minLength":null,"showClear":false,"textAfter":"","iconBefore":"","labelAlign":"left","labelWidth":"33","spellCheck":false,"textBefore":"","formDataKey":"{{ self.id }}","patternType":"","placeholder":"Enter value","tooltipText":"","autoComplete":false,"inputTooltip":"","labelCaption":"","showInEditor":false,"labelPosition":"left","autoCapitalize":"none","labelWidthUnit":"%","customValidation":"","validationMessage":"","showCharacterCount":false,"hideValidationMessage":false,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-09-20T23:25:50.006Z","namespace":null,"position2":{"col":0,"row":0,"width":12,"height":1,"tabNum":0,"rowGroup":"body","container":"smsSettingsContainer","subcontainer":"b21d2"},"updatedAt":"2022-10-28T16:51:17.947Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"lastInboundMessage":{"id":"lastInboundMessage","type":"state","style":null,"folder":"tempState","screen":null,"subtype":"State","tabIndex":null,"template":{"value":null,"persistValue":false,"persistedValueKey":"","_persistedValueGetter":null,"_persistedValueSetter":null},"container":"","createdAt":"2022-09-08T16:59:48.944Z","namespace":null,"position2":null,"updatedAt":"2022-09-08T16:59:48.944Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"addInboundToHistory":{"id":"addInboundToHistory","type":"datasource","style":null,"folder":"js","screen":null,"subtype":"JavascriptQuery","tabIndex":null,"template":{"data":null,"error":null,"query":"// Usage: Process inbound messags\n// Triggered by: Success event handler on listenForModelUpdates\n\nconst history = messageHistory.value;\n\n// Get the last inbound message from temp state\nconst lastInbound = lastInboundMessage.value;\n\n// Get the new inbound message from the custom component model\nconst newInbound = twilioConversationsCustomComponent.model.inbound;\n\n// If the new inbound message hasn't been processed yet...\nif (lastInbound != newInbound) {\n  // Push the message to messageHistory temp state\n  const payload = { message: newInbound, direction: \"inbound\" };\n  history.push(payload);\n  messageHistory.setValue(history);\n\n  // Update the last processed inbound message temp state\n  lastInboundMessage.setValue(newInbound);\n}\n","events":[],"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"cacheKeyTtl":"","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","queryTimeout":"10000","allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":false,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":false,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":null,"importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"queryFailureConditions":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-09-07T22:32:05.380Z","namespace":null,"position2":null,"updatedAt":"2022-09-13T21:14:32.440Z","resourceName":"JavascriptQuery","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"customerNumberInput":{"id":"customerNumberInput","type":"widget","style":{},"folder":"","screen":null,"subtype":"TextInputWidget2","tabIndex":null,"template":{"label":"Customer #","value":"","events":[],"hidden":false,"invalid":false,"loading":false,"pattern":"","autoFill":"","disabled":false,"readOnly":false,"required":true,"_validate":false,"iconAfter":"","labelWrap":false,"maxLength":null,"minLength":null,"showClear":false,"textAfter":"","iconBefore":"","labelAlign":"left","labelWidth":"33","spellCheck":false,"textBefore":"","formDataKey":"{{ self.id }}","patternType":"","placeholder":"Enter phone number","tooltipText":"","autoComplete":false,"inputTooltip":"","labelCaption":"","showInEditor":false,"labelPosition":"left","autoCapitalize":"none","labelWidthUnit":"%","customValidation":"","validationMessage":"","showCharacterCount":false,"hideValidationMessage":false,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-08-23T22:39:52.612Z","namespace":null,"position2":{"col":0,"row":1,"width":12,"height":1,"tabNum":0,"rowGroup":"body","container":"smsSettingsContainer","subcontainer":"b21d2"},"updatedAt":"2022-10-28T16:51:21.756Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"deleteConversations":{"id":"deleteConversations","type":"datasource","style":null,"folder":"writes","screen":null,"subtype":"OpenAPIQuery","tabIndex":null,"template":{"data":null,"path":"/v1/Services/{ChatServiceSid}/Conversations/{Sid}","error":null,"query":"","events":[],"method":"delete","server":null,"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"parameters":"{\"Sid\":\"{{sid}}\",\"ChatServiceSid\":\"{{conversationsServiceIdInput.value}}\"}","cacheKeyTtl":"","operationId":"DeleteServiceConversation","requestBody":null,"transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","autoPaginate":false,"queryTimeout":"10000","specBasePath":null,"allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","serverVariables":"{}","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"specPathOverride":"https://specs.retool.com/specs/twilio/twilio_conversations_v1/3.0.1/1.9.0.json","autoPaginateLimit":500,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":false,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":false,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":null,"importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"parameterDynamicStates":"{\"Sid\":false,\"X-Twilio-Webhook-Enabled\":false}","queryFailureConditions":"","requestBodyDynamicStates":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-11-18T00:26:01.763Z","namespace":null,"position2":null,"updatedAt":"2022-11-18T00:26:47.423Z","resourceName":"1701d6b5-6146-420e-8127-b8da8c78b1da","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"addOutboundToHistory":{"id":"addOutboundToHistory","type":"datasource","style":null,"folder":"js","screen":null,"subtype":"JavascriptQuery","tabIndex":null,"template":{"data":null,"error":null,"query":"// Usage: Processes outbound messages and pushes them to the twilioConversationsCustomComponent\n// Triggered by: Submit event handler on messageInput\n\nconst outboundMessage = messageInput.value;\n\n// Push the outbound message to the Conversations custom component\ntwilioConversationsCustomComponent.updateModel({ outbound: outboundMessage });\n\n// Get current state of message history\nconst history = messageHistory.value;\n\n// Append the outbound message to history\nconst payload = { message: outboundMessage, direction: \"outbound\" };\nhistory.push(payload);\n\n// Save updated history to temp state\nmessageHistory.setValue(history);\n\n// Clear the messageInput component for the next message\nmessageInput.clearValue();\n","events":[],"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"cacheKeyTtl":"","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","queryTimeout":"10000","allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"{{!addParticipant.data}}","watchedParams":[],"successMessage":"","changesetObject":"","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":false,"showSuccessToaster":false,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":false,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":null,"importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"queryFailureConditions":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-09-07T22:45:20.034Z","namespace":null,"position2":null,"updatedAt":"2022-11-18T00:31:30.366Z","resourceName":"JavascriptQuery","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"listenForEmojiSelect":{"id":"listenForEmojiSelect","type":"datasource","style":null,"folder":"js","screen":null,"subtype":"SqlTransformQuery","tabIndex":null,"template":{"data":null,"error":null,"query":"-- Listen for updates to the emoji key on the emojiPickerCustomComponent model to trigger event handlers \nselect\n  *\nfrom\n  {{emojiPickerCustomComponent.model.emoji}}","events":[{"type":"widget","event":"success","method":"setValue","params":{"value":"{{messageInput.value + emojiPickerCustomComponent.model.emoji}}"},"waitMs":"0","enabled":"{{emojiPickerCustomComponent.model.emoji}}","pluginId":"messageInput","targetId":null,"waitType":"debounce"},{"type":"widget","event":"success","method":"focus","params":{},"waitMs":"0","pluginId":"messageInput","targetId":null,"waitType":"debounce"}],"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"cacheKeyTtl":"","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","queryTimeout":"10000","allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":true,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":true,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":null,"importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"queryFailureConditions":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-09-12T16:56:49.488Z","namespace":null,"position2":null,"updatedAt":"2022-09-13T21:18:38.920Z","resourceName":"SQL Transforms","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"modelViewerContainer":{"id":"modelViewerContainer","type":"widget","style":{},"folder":"","screen":null,"subtype":"ContainerWidget2","tabIndex":null,"template":{"_ids":["07571"],"views":[],"events":{},"hidden":"true","labels":[],"_labels":[""],"hovered":false,"loading":false,"disabled":false,"itemMode":"static","showBody":"{{modelToggle.value}}","viewKeys":[],"_viewKeys":["View 1"],"clickable":false,"heightType":"auto","showFooter":false,"showHeader":true,"transition":"none","iconByIndex":[],"tooltipText":"","_iconByIndex":[""],"overflowType":"scroll","showInEditor":false,"hiddenByIndex":[],"hoistFetching":true,"_hiddenByIndex":[""],"currentViewKey":null,"tooltipByIndex":[],"_tooltipByIndex":[""],"disabledByIndex":[],"_disabledByIndex":[""],"currentViewIndex":null,"iconPositionByIndex":[],"_iconPositionByIndex":[""],"_hasMigratedNestedItems":true,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-09-08T16:22:29.461Z","namespace":null,"position2":{"col":0,"row":3.4000000000000066,"width":4,"height":13.2,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-09-12T20:10:54.675Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"smsSettingsContainer":{"id":"smsSettingsContainer","type":"widget","style":{},"folder":"","screen":null,"subtype":"ContainerWidget2","tabIndex":null,"template":{"_ids":["b21d2"],"views":[],"events":{},"hidden":"true","labels":[],"_labels":[""],"hovered":false,"loading":false,"disabled":false,"itemMode":"static","showBody":true,"viewKeys":[],"_viewKeys":["View 1"],"clickable":false,"heightType":"auto","showFooter":true,"showHeader":true,"transition":"none","iconByIndex":[],"tooltipText":"","_iconByIndex":[""],"overflowType":"scroll","showInEditor":false,"hiddenByIndex":[],"hoistFetching":true,"_hiddenByIndex":[""],"currentViewKey":null,"tooltipByIndex":[],"_tooltipByIndex":[""],"disabledByIndex":[],"_disabledByIndex":[""],"currentViewIndex":null,"iconPositionByIndex":[],"_iconPositionByIndex":[""],"_hasMigratedNestedItems":true,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-08-23T22:39:28.573Z","namespace":null,"position2":{"col":0,"row":0.7999999999999994,"width":4,"height":0.2,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-09-19T23:21:46.166Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"emojiPickerVisibility":{"id":"emojiPickerVisibility","type":"state","style":null,"folder":"tempState","screen":null,"subtype":"State","tabIndex":null,"template":{"value":"true","persistValue":false,"persistedValueKey":"","_persistedValueGetter":null,"_persistedValueSetter":null},"container":"","createdAt":"2022-09-12T16:53:20.255Z","namespace":null,"position2":null,"updatedAt":"2022-09-12T16:53:36.709Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"listenForModelUpdates":{"id":"listenForModelUpdates","type":"datasource","style":null,"folder":"js","screen":null,"subtype":"SqlTransformQuery","tabIndex":null,"template":{"data":null,"error":null,"query":"-- Listen for updates to the inbound key on the webSocketCustomComponent model to trigger event handlers\nselect\n  *\nfrom\n  {{ twilioConversationsCustomComponent.model.inbound }}","events":[{"type":"datasource","event":"success","method":"trigger","params":{},"waitMs":"0","pluginId":"addInboundToHistory","targetId":null,"waitType":"debounce"}],"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"cacheKeyTtl":"","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","queryTimeout":"10000","allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":true,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":true,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":"","importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"queryFailureConditions":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-09-07T22:29:35.927Z","namespace":null,"position2":null,"updatedAt":"2022-09-13T21:02:45.847Z","resourceName":"SQL Transforms","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"listenForMessageDisplayed":{"id":"listenForMessageDisplayed","type":"datasource","style":null,"folder":"js","screen":null,"subtype":"SqlTransformQuery","tabIndex":null,"template":{"data":null,"error":null,"query":"-- Listen for updates to the data key on the messagesListView component to trigger event handlers \nselect\n  *\nfrom\n  {{messagesListView.data}}","events":[{"type":"widget","event":"success","method":"scrollIntoView","params":{"options":{"block":"end"}},"waitMs":"0","pluginId":"message","targetId":null,"waitType":"debounce","pluginInstance":"{{messagesListView.data.length-1}}"}],"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"cacheKeyTtl":"","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","queryTimeout":"10000","allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":true,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":true,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":"","importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"queryFailureConditions":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-09-12T19:12:54.364Z","namespace":null,"position2":null,"updatedAt":"2022-09-13T21:19:11.422Z","resourceName":"SQL Transforms","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"emojiPickerCustomComponent":{"id":"emojiPickerCustomComponent","type":"widget","style":{},"folder":"","screen":null,"subtype":"CustomComponentWidget","tabIndex":null,"template":{"model":"{}","hidden":"{{emojiPickerVisibility.value}}","allowForms":false,"heightType":"fixed","iframeCode":"<!-- Retool custom component model \n{\n    emoji (string): < the most recent unicode emoji selected by the user >\n}\n-->\n\n<!DOCTYPE html>\n<html>\n    <head>\n        <!-- Initialize the emoji picker: https://github.com/nolanlawson/emoji-picker-element/ -->\n        <script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js\"></script>\n    </head>\n    <body>\n        <emoji-picker></emoji-picker>\n        <script>\n            // Define an event handler which pushes the selected emoji to the Retool component model\n            document.querySelector('emoji-picker')\n                .addEventListener('emoji-click', event => window.Retool.modelUpdate({emoji:event.detail.unicode}))\n\n        </script>\n    </body>\n</html>\n","allowCamera":false,"allowModals":false,"allowPopups":false,"allowPayment":false,"allowDownloads":false,"allowFullscreen":false,"allowMicrophone":false,"allowSameOrigin":true,"allowGeolocation":false,"allowTopNavigation":false,"allowPopupsToEscapeSandbox":false},"container":"","createdAt":"2022-09-12T16:46:19.853Z","namespace":null,"position2":{"col":8,"row":0.6000000000000005,"width":4,"height":11.2,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-09-13T17:37:10.364Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"conversationsServiceIdInput":{"id":"conversationsServiceIdInput","type":"widget","style":{},"folder":"","screen":null,"subtype":"TextInputWidget2","tabIndex":null,"template":{"label":"","value":"","events":[],"hidden":false,"invalid":false,"loading":false,"pattern":"","autoFill":"","disabled":false,"readOnly":false,"required":true,"_validate":false,"iconAfter":"","labelWrap":false,"maxLength":null,"minLength":null,"showClear":false,"textAfter":"","iconBefore":"","labelAlign":"left","labelWidth":"33","spellCheck":false,"textBefore":"","formDataKey":"{{ self.id }}","patternType":"","placeholder":"Enter Conversations service SID","tooltipText":"","autoComplete":false,"inputTooltip":"","labelCaption":"","showInEditor":false,"labelPosition":"left","autoCapitalize":"none","labelWidthUnit":"%","customValidation":"","validationMessage":"","showCharacterCount":false,"hideValidationMessage":false,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-11-18T00:35:37.593Z","namespace":null,"position2":{"col":0,"row":0.6,"width":12,"height":1,"tabNum":0,"rowGroup":"body","container":"modal1","subcontainer":""},"updatedAt":"2022-11-18T00:35:46.072Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"twilioConversationsCustomComponent":{"id":"twilioConversationsCustomComponent","type":"widget","style":{},"folder":"","screen":null,"subtype":"CustomComponentWidget","tabIndex":null,"template":{"model":"{}","hidden":"","allowForms":false,"heightType":"fixed","iframeCode":"<!-- Retool custom component model\n{\n  browser (string): \"Chrome\" | \"Not Chrome\",\n  conversationCleared (boolean): < set by initialize Retool JS query >,\n  token (string): < a Twilio JWT containing a chat access token >,\n  status: (string): \"The client successfully initialized!\",\n  error: (string): \"The client failed to initialize\",\n  conversationSid (string): < a Twilio SID associated with the active Conversation >,\n  customerNumber (string): < the E.164-formatted phone number of the participating attached to the Conversation>,\n  outbound (string): < the most recent message sent by the Retool user >,\n  inbound (string): < the most recent message received from the customer > \n}\n-->\n\n<!DOCTYPE html>\n<html>\n  <head>\n    <title>Embedded Twilio Conversations Client for Retool</title>\n    <!-- Initialize the Twilio Conversations SDK: https://www.twilio.com/docs/conversations/javascript/changelog#latest-release -->\n    <script\n      src=\"https://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/twilio-conversations.min.js\"\n      integrity=\"sha256-v2SFLWujVq0wnwHpcxct7bzTP8wII7sumEhAKMEqgHQ=\"\n      crossorigin=\"anonymous\"\n    ></script>\n\n    <script>\n      // Parse the Retool user's userAgent to determine if they are using Chrome.\n      // Non-Chrome browsers may restrict access to WebSockets, the technology which powers bi-directional communication between\n      // the Conversations SDK and service.\n      if (navigator.userAgent.indexOf(\"Chrome\") > -1) {\n        window.Retool.modelUpdate({ browser: \"Chrome\" });\n      } else {\n        window.Retool.modelUpdate({ browser: \"Not Chrome\" });\n      }\n\n      // Initialize variables to be used inside of the window.Retool.subscribe function\n      var client;\n      var conversation;\n      var inboundListener;\n      var outboundMessage;\n      var inboundMessage;\n\n      // window.Retool.subscribe is evaluated whenever the Retool custom component model changes: https://docs.retool.com/docs/custom-components#non-react-javascript\n      window.Retool.subscribe(async function (model) {\n        \n        // If a chat token is passed into the model, and the Client object is not yet available...\n        if (model.token && !client && model.conversationsCleared) {\n          client = new Twilio.Conversations.Client(model.token); // Instantiate a new Client: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/#instantiating-and-using\n\n          // Set event handlers on the new Client which trigger log messages: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Client.html#stateChanged\n          client.on(\"stateChanged\", (state) => {\n            if (state === \"failed\") {\n              window.Retool.modelUpdate({\n                // Update the model with the error: https://docs.retool.com/docs/custom-components#non-react-javascript\n                error: \"The client failed to initialize\",\n              });\n            }\n\n            if (state === \"initialized\") {\n              window.Retool.modelUpdate({\n                status: \"The client successfully initialized!\",\n              });\n            }\n          });\n        }\n\n        // If the Client is inititialized and no Conversation has been created...\n        if (client && !conversation) {\n          conversation = \"initializing\"\n          conversation = await client.createConversation(); // Create a Conversation: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Client.html#createConversation\n          await conversation.join(); // Join the Conversation: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Conversation.html#join\n          window.Retool.modelUpdate({ conversationSid: conversation.sid }); // Pass the Conversation SID to the component model\n        }\n\n        // If the Client is initialized, a customer number has been passed to the model, and no inbound message listener has been defined...\n        if (client && model.customerNumber && !inboundListener) {\n          client.on(\"messageAdded\", (message) => {\n            // When a message is added to the conversation: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Client.html#messageAdded\n            if (\n              // If the message author is the customer, and we haven't processed the message already...\n              message.state.author === model.customerNumber &&\n              message.state.body != inboundMessage\n            ) {\n              // Push the message to the component model.\n              inboundMessage = message.state.body;\n              window.Retool.modelUpdate({ inbound: message.state.body });\n            }\n          });\n          inboundListener = true;\n        }\n\n        // If the Client and Conversations are initialized, there is an outbound message on the model, and we haven't procesed it yet...\n        if (\n          client &&\n          conversation &&\n          model.outbound &&\n          model.outbound != outboundMessage\n        ) {\n          outboundMessage = model.outbound;\n          await conversation.sendMessage(outboundMessage); // Send the message: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Conversation.html#sendMessage\n        }\n      });\n    </script>\n  </head>\n  <body>\n    <p style=\"font-family:sans-serif;\">Twilio Conversations Custom Component</p>\n  </body>\n</html>\n","allowCamera":false,"allowModals":false,"allowPopups":false,"allowPayment":false,"showInEditor":false,"allowDownloads":false,"allowFullscreen":false,"allowMicrophone":false,"allowSameOrigin":false,"allowGeolocation":false,"allowTopNavigation":false,"allowPopupsToEscapeSandbox":false},"container":"","createdAt":"2022-06-07T23:09:47.016Z","namespace":null,"position2":{"col":0,"row":16.599999999999998,"width":4,"height":1.5999999999999999,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-11-18T22:15:58.937Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null}},"version":"2.103.2","appStyles":"","createdAt":null,"appThemeId":null,"isFetching":false,"rootScreen":null,"isMobileApp":false,"testEntities":[],"isGlobalWidget":false,"customShortcuts":[],"customDocumentTitle":"","preloadedAppJSLinks":[],"markdownLinkBehavior":"never","multiScreenMobileApp":false,"queryStatusVisibility":true,"instrumentationEnabled":false,"pageLoadValueOverrides":[],"preloadedAppJavaScript":null,"urlFragmentDefinitions":[],"experimentalPerfFeatures":{"useRuntimeV2":false,"serverDepGraphEnabled":false,"batchCommitModelEnabled":false,"skipDepCycleCheckingEnabled":false},"responsiveLayoutDisabled":false,"inAppRetoolPillAppearance":"NO_OVERRIDE","loadingIndicatorsDisabled":false,"customDocumentTitleEnabled":false,"experimentalDataTabEnabled":false,"experimentalStabilityFeatures":{"lockModelForUpdates":false}}}},{"type":"MIGRATIONS_UP_TO_DATE","payload":{"migratedAppTemplate":{"tests":[],"folders":["gets","writes","js","tempState"],"plugins":{"$main":{"id":"$main","type":"frame","style":{},"folder":"","screen":null,"subtype":"Frame","tabIndex":null,"template":{"type":"main","sticky":false},"container":"","createdAt":"2022-08-22T19:19:13.770Z","namespace":null,"position2":null,"updatedAt":"2022-08-22T19:19:13.770Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"text1":{"id":"text1","type":"widget","style":{},"folder":"","screen":null,"subtype":"TextWidget2","tabIndex":null,"template":{"value":"### SMS with Twilio Conversations\n###### ℹ️ This demo uses the Twilio Conversations JS SDK to establish bi-directional messaging with an SMS client.\n","hidden":false,"heightType":"auto","imageWidth":"fit","tooltipText":"","overflowType":"scroll","showInEditor":false,"verticalAlign":"top","disableMarkdown":false,"horizontalAlign":"left","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-08-23T23:25:46.482Z","namespace":null,"position2":{"col":0,"row":0.2,"width":4,"height":0.6000000000000001,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-09-13T22:44:17.579Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"text2":{"id":"text2","type":"widget","style":{},"folder":"","screen":null,"subtype":"TextWidget2","tabIndex":null,"template":{"value":"#### Enter your Twilio Conversations Service SID to get started!","hidden":false,"heightType":"auto","imageWidth":"fit","tooltipText":"","overflowType":"scroll","showInEditor":false,"verticalAlign":"center","disableMarkdown":false,"horizontalAlign":"left","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-11-18T00:34:29.093Z","namespace":null,"position2":{"col":0,"row":0,"width":11,"height":0.6,"tabNum":0,"rowGroup":"body","container":"modal1","subcontainer":""},"updatedAt":"2022-11-18T00:34:50.868Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"alert1":{"id":"alert1","type":"widget","style":{},"folder":"","screen":null,"subtype":"AlertWidget","tabIndex":null,"template":{"url":"","type":"error","title":"Error","action":"","events":[],"hidden":"{{!twilioConversationsCustomComponent.model.error}}","newWindow":false,"buttonText":"","buttonType":"action","description":"{{twilioConversationsCustomComponent.model.error}}","exportQuery":"","valueToCopy":"","exportFileName":"","exportFileType":"csv","internalUrlPath":"","internalUrlQuery":"","internalUrlHashParams":""},"container":"","createdAt":"2022-06-09T16:32:45.293Z","namespace":null,"position2":{"col":6,"row":0,"width":6,"height":1,"tabNum":0,"rowGroup":"body","container":"","subcontainer":"header"},"updatedAt":"2022-09-13T20:56:40.772Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"alert3":{"id":"alert3","type":"widget","style":{},"folder":"","screen":null,"subtype":"AlertWidget","tabIndex":null,"template":{"url":"","type":"error","title":"Some browsers have websocket security restrictions","action":"","hidden":"{{!twilioConversationsCustomComponent.model.browser || twilioConversationsCustomComponent.model.browser === \"Chrome\"}}","newWindow":false,"buttonText":"","buttonType":"action","description":"Use Chrome to demo this application for best results.","exportQuery":"","valueToCopy":"","exportFileName":"","exportFileType":"csv","internalUrlPath":"","internalUrlQuery":"","internalUrlHashParams":""},"container":"","createdAt":"2022-09-12T15:49:54.317Z","namespace":null,"position2":{"col":0,"row":0.9999999999999973,"width":4,"height":2.4,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-09-19T22:02:28.470Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"image1":{"id":"image1","type":"widget","style":{},"folder":"","screen":null,"subtype":"ImageWidget2","tabIndex":null,"template":{"fit":"cover","src":"https://d25hn4jiqx5f7l.cloudfront.net/companies/logos/original/retool_1570685791.png?1570685791","events":{},"hidden":false,"altText":"","srcType":"src","dbBlobId":"","srcWidth":null,"clickable":false,"srcHeight":null,"heightType":"auto","aspectRatio":null,"tooltipText":"","showInEditor":false,"storageBlobId":"","horizontalAlign":"center","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-09-19T22:03:01.723Z","namespace":null,"position2":{"col":9,"row":0,"width":1,"height":3,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-09-19T22:03:23.968Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"image2":{"id":"image2","type":"widget","style":{},"folder":"","screen":null,"subtype":"ImageWidget2","tabIndex":null,"template":{"fit":"cover","src":"https://cdn.worldvectorlogo.com/logos/twilio.svg","events":{},"hidden":false,"altText":"","srcType":"src","dbBlobId":"","srcWidth":null,"clickable":false,"srcHeight":null,"heightType":"auto","aspectRatio":null,"tooltipText":"","showInEditor":false,"storageBlobId":"","horizontalAlign":"center","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-09-19T22:03:04.281Z","namespace":null,"position2":{"col":10,"row":0,"width":1,"height":3.8,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-09-19T22:04:07.766Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"modal1":{"id":"modal1","type":"widget","style":{},"folder":"","screen":null,"subtype":"ModalWidget","tabIndex":null,"template":{"hidden":"true","opened":false,"loading":"","disabled":"","buttonText":"Open Modal","modalWidth":"","modalHeight":"","onModalOpen":"","tooltipText":"","onModalClose":"","modalHeightType":"auto","modalOverflowType":"scroll","closeOnOutsideClick":false},"container":"","createdAt":"2022-11-18T00:33:36.328Z","namespace":null,"position2":{"col":9,"row":11.799999999999997,"width":3,"height":1,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-11-18T00:34:59.150Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"$header":{"id":"$header","type":"frame","style":{},"folder":"","screen":null,"subtype":"Frame","tabIndex":null,"template":{"type":"header","sticky":true},"container":"","createdAt":"2022-08-22T19:19:13.771Z","namespace":null,"position2":null,"updatedAt":"2022-08-22T19:19:13.771Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"button1":{"id":"button1","type":"widget","style":{},"folder":"","screen":null,"subtype":"ButtonWidget2","tabIndex":null,"template":{"text":"Submit","events":[{"type":"datasource","event":"click","method":"trigger","params":{},"waitMs":"0","pluginId":"addParticipant","targetId":null,"waitType":"debounce"},{"type":"widget","event":"click","method":"updateModel","params":{"model":"{customerNumber: {{customerNumberInput.value}} }"},"waitMs":"0","pluginId":"twilioConversationsCustomComponent","targetId":null,"waitType":"debounce"},{"type":"widget","event":"click","method":"setValue","params":{},"waitMs":"0","pluginId":"messageInput","targetId":null,"waitType":"debounce"}],"hidden":false,"submit":false,"loading":false,"disabled":"{{!customerNumberInput.value || customerNumberInput.validationMessage || !twilioNumberInput.value || twilioNumberInput.validationMessage}}","clickable":false,"iconAfter":"","iconBefore":"","tooltipText":"","showInEditor":false,"styleVariant":"solid","loaderPosition":"auto","submitTargetId":null,"horizontalAlign":"stretch","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-09-19T23:21:52.045Z","namespace":null,"position2":{"col":8,"row":0,"width":4,"height":1,"tabNum":0,"rowGroup":"footer","container":"smsSettingsContainer","subcontainer":""},"updatedAt":"2022-11-18T00:30:04.728Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"button2":{"id":"button2","type":"widget","style":{},"folder":"","screen":null,"subtype":"ButtonWidget2","tabIndex":null,"template":{"text":"Submit","events":[{"type":"datasource","event":"click","method":"trigger","params":{},"waitMs":"0","pluginId":"initialize","targetId":null,"waitType":"debounce"},{"type":"widget","event":"click","method":"close","params":{},"waitMs":"0","pluginId":"modal1","targetId":null,"waitType":"debounce"}],"hidden":false,"submit":false,"loading":false,"disabled":"{{!conversationsServiceIdInput.value}}","clickable":false,"iconAfter":"","iconBefore":"","tooltipText":"","showInEditor":false,"styleVariant":"solid","loaderPosition":"auto","submitTargetId":null,"horizontalAlign":"stretch","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-11-18T00:35:57.179Z","namespace":null,"position2":{"col":7,"row":1.6,"width":5,"height":1,"tabNum":0,"rowGroup":"body","container":"modal1","subcontainer":""},"updatedAt":"2022-11-18T00:37:44.850Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"message":{"id":"message","type":"widget","style":{},"folder":"","screen":null,"subtype":"HTMLWidget","tabIndex":null,"template":{"css":"/* CSS courtesy of https://codepen.io/AllThingsSmitty/pen/jommGQ */\n\n.imessage {\n  background-color: #fff;\n  border-radius: 0.25rem;\n  display: flex;\n  flex-direction: column;\n  font-family: -apple-system, system-ui, BlinkMacSystemFont;\n  font-size: 1.25rem;\n  margin: 0 auto 1rem;\n  max-width: 600px;\n}\n\n.imessage p {\n  border-radius: 1.15rem;\n  line-height: 1.25;\n  max-width: 75%;\n  padding: 0.5rem .875rem;\n  position: relative;\n  word-wrap: break-word;\n}\n\n.imessage p::before,\n.imessage p::after {\n  bottom: -0.1rem;\n  content: \"\";\n  height: 1rem;\n  position: absolute;\n}\n\np.from-me {\n  align-self: flex-end;\n  background-color: #248bf5;\n  color: #fff; \n}\n\np.from-me::before {\n  border-bottom-left-radius: 0.8rem 0.7rem;\n  border-right: 1rem solid #248bf5;\n  right: -0.35rem;\n  transform: translate(0, -0.1rem);\n}\n\np.from-me::after {\n  background-color: #fff;\n  border-bottom-left-radius: 0.5rem;\n  right: -40px;\n  transform:translate(-30px, -2px);\n  width: 10px;\n}\n\np[class^=\"from-\"] {\n  margin: 0.5rem 0;\n  width: fit-content;\n}\n\np.from-me ~ p.from-me {\n  margin: 0.25rem 0 0;\n}\n\np.from-me ~ p.from-me:not(:last-child) {\n  margin: 0.25rem 0 0;\n}\n\np.from-me ~ p.from-me:last-child {\n  margin-bottom: 0.5rem;\n}\n\np.from-them {\n  align-items: flex-start;\n  background-color: #e5e5ea;\n  color: #000;\n}\n\np.from-them:before {\n  border-bottom-right-radius: 0.8rem 0.7rem;\n  border-left: 1rem solid #e5e5ea;\n  left: -0.35rem;\n  transform: translate(0, -0.1rem);\n}\n\np.from-them::after {\n  background-color: #fff;\n  border-bottom-right-radius: 0.5rem;\n  left: 20px;\n  transform: translate(-30px, -2px);\n  width: 10px;\n}\n\np[class^=\"from-\"].emoji {\n  background: none;\n  font-size: 2.5rem;\n}\n\np[class^=\"from-\"].emoji::before {\n  content: none;\n}\n\n.no-tail::before {\n  display: none;\n}\n\n.margin-b_none {\n  margin-bottom: 0 !important;\n}\n\n.margin-b_one {\n  margin-bottom: 1rem !important;\n}\n\n.margin-t_one {\n  margin-top: 1rem !important;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/* general styling */\n@font-face {\n  font-family: \"SanFrancisco\";\n  src:\n    url(\"https://cdn.rawgit.com/AllThingsSmitty/fonts/25983b71/SanFrancisco/sanfranciscodisplay-regular-webfont.woff2\") format(\"woff2\"),\n    url(\"https://cdn.rawgit.com/AllThingsSmitty/fonts/25983b71/SanFrancisco/sanfranciscodisplay-regular-webfont.woff\") format(\"woff\");\n}\n\n._retool-messagesListView {  \n  font-family: -apple-system, \n    BlinkMacSystemFont, \n    \"Segoe UI\", \n    Roboto, \n    Oxygen-Sans, \n    Ubuntu, \n    Cantarell, \n    \"Helvetica Neue\", \n    sans-serif;\n  font-weight: normal;\n  margin: 0;\n}\n\n._retool-messageListView.container {\n  margin: 0 auto;\n  max-width: 600px;\n  padding: 1rem;\n}\n\n._retool-messageListView h1 {\n  font-weight: normal;\n  margin-bottom: 0.5rem;\n}\n\n._retool-messageListView h2 {\n  border-bottom: 1px solid #e5e5ea;\n  color: #666;\n  font-weight: normal;\n  margin-top: 0;\n  padding-bottom: 1.5rem;\n}\n\n.comment {\n  color: #222;\n  font-size: 1.25rem;\n  line-height: 1.5;\n  margin-bottom: 1.25rem;\n  max-width: 100%;\n  padding: 0;\n}\n\n@media screen and (max-width: 800px) {\n  ._retool-messageListView {\n    margin: 0 0.5rem;\n  }\n\n  ._retool-messageListView.container {\n    padding: 0.5rem;\n  }\n\n  .imessage {\n    font-size: 1.05rem;\n    margin: 0 auto 1rem;\n    max-width: 600px;\n    padding: 0.25rem 0.875rem;\n  }\n\n  .imessage p {\n    margin: 0.5rem 0;\n  }\n}","html":"<div class=\"imessage\">\n  <p class={{ messageHistory.value[i].direction === \"outbound\" ? 'from-me' : 'from-them'}} id={{\"message\"}}> {{ messageHistory.value[i].message }}\n  </p>   \n</div>","hidden":false,"tooltipText":"","showInEditor":false,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-08-23T09:05:55.927Z","namespace":null,"position2":{"col":0,"row":0,"width":12,"height":0.2,"tabNum":0,"rowGroup":"body","container":"messagesListView","subcontainer":""},"updatedAt":"2022-09-20T23:24:26.077Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"popModal":{"id":"popModal","type":"datasource","style":null,"folder":"js","screen":null,"subtype":"JavascriptQuery","tabIndex":null,"template":{"data":null,"error":null,"query":"modal1.open()","events":[],"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"cacheKeyTtl":"","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","queryTimeout":"10000","allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":true,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":false,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":false,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":null,"importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"queryFailureConditions":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-11-18T00:38:31.158Z","namespace":null,"position2":null,"updatedAt":"2022-11-18T00:38:49.591Z","resourceName":"JavascriptQuery","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"$appStyles":{"id":"$appStyles","type":"setting","style":null,"folder":"","screen":null,"subtype":"AppStyles","tabIndex":null,"template":{"value":""},"container":"","createdAt":"2022-09-12T16:12:40.583Z","namespace":null,"position2":null,"updatedAt":"2022-09-20T23:58:47.625Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"initialize":{"id":"initialize","type":"datasource","style":null,"folder":"js","screen":null,"subtype":"JavascriptQuery","tabIndex":null,"template":{"data":null,"error":null,"query":"// Usage: Prepare the app for first run by deleting old Conversations, passing a Twilio access token to twilioConversationsCustomComponent, and unhiding UI elements.\n// Triggered by: page load\n\n// Get all Twilio Conversations\nconst data = await getConversations.trigger();\n\nconsole.log(data)\n\n// Get a list of all Conversation SIDs\nconst conversationSids = data.conversations.map(\n  (conversation) => conversation.sid\n);\n\n// Delete all Conversations, passing each Conversation SID to the deleteConverstions query using additionalScope:\n// https://docs.retool.com/docs/scripting-retool#trigger-a-query\nfor (const sid of conversationSids) {\n  await deleteConversations.trigger({ additionalScope: { sid: sid } });\n}\n\n// Get a new chat-enabled Twilio access token\nawait getChatToken.trigger();\n\n// Inform the twilioConversationsCustomComponent that all pending conversations have been deleted\ntwilioConversationsCustomComponent.updateModel({ conversationsCleared: true });\n\n// Toggle UI component display to enable normal app usage\nloadingSpinner.setHidden(true);\nsmsSettingsContainer.setHidden(false);\nchatContainer.setHidden(false);\nmodelViewerContainer.setHidden(false);\n","events":[{"type":"widget","event":"success","method":"setValue","params":{"value":"\" \""},"waitMs":"0","pluginId":"messageInput","targetId":null,"waitType":"debounce"}],"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"cacheKeyTtl":"","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","queryTimeout":"10000","allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":false,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":false,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":null,"importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"queryFailureConditions":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-09-07T16:23:10.505Z","namespace":null,"position2":null,"updatedAt":"2022-11-18T00:42:22.873Z","resourceName":"JavascriptQuery","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"emojiButton":{"id":"emojiButton","type":"widget","style":{},"folder":"","screen":null,"subtype":"IconWidget","tabIndex":null,"template":{"icon":"bold/mail-smiley-happy-face-alternate","events":[{"type":"state","event":"click","method":"setValue","params":{"value":"{{!emojiPickerVisibility.value}}"},"waitMs":"0","pluginId":"emojiPickerVisibility","targetId":null,"waitType":"debounce"}],"hidden":"","altText":"","clickable":false,"tooltipText":"","showInEditor":false,"horizontalAlign":"center","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-09-12T16:51:05.591Z","namespace":null,"position2":{"col":11,"row":11,"width":1,"height":0.9999999999999999,"tabNum":0,"rowGroup":"body","container":"chatContainer","subcontainer":"d9fee"},"updatedAt":"2022-09-12T20:05:45.833Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"modelToggle":{"id":"modelToggle","type":"widget","style":{},"folder":"","screen":null,"subtype":"ToggleLinkWidget","tabIndex":null,"template":{"text":"Custom Component Model","value":false,"events":{},"hidden":false,"disabled":false,"iconType":"caret","allowWrap":false,"tooltipText":"","iconPosition":"before","showInEditor":false,"showUnderline":"never","horizontalAlign":"left","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-09-13T17:48:57.533Z","namespace":null,"position2":{"col":0,"row":0,"width":7,"height":0.6,"tabNum":0,"rowGroup":"header","container":"modelViewerContainer","subcontainer":""},"updatedAt":"2022-09-13T22:41:58.924Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"getChatToken":{"id":"getChatToken","type":"datasource","style":null,"folder":"gets","screen":null,"subtype":"RESTQuery","tabIndex":null,"template":{"body":"","data":null,"type":"GET","error":null,"query":"","events":[{"type":"widget","event":"success","method":"updateModel","params":{"model":"{token: {{ getChatToken.data.token }} } "},"waitMs":"0","pluginId":"twilioConversationsCustomComponent","targetId":null,"waitType":"debounce"}],"cookies":"","headers":"","rawData":null,"bodyType":"json","metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"cacheKeyTtl":"","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","queryTimeout":"10000","allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","paginationLimit":"","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"changesetIsObject":false,"enableTransformer":false,"paginationEnabled":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":false,"confirmationMessage":null,"importedQueryInputs":{},"paginationDataField":"","playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":false,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":null,"importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"queryFailureConditions":"","paginationPaginationField":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-09-07T00:06:34.496Z","namespace":null,"position2":null,"updatedAt":"2022-09-19T22:52:10.314Z","resourceName":"d5c8102b-26f6-453b-8406-9da5c323c76d","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"messageInput":{"id":"messageInput","type":"widget","style":{},"folder":"","screen":null,"subtype":"TextInputWidget2","tabIndex":null,"template":{"label":"","value":"","events":[{"type":"datasource","event":"submit","method":"trigger","params":{},"waitMs":"0","pluginId":"addOutboundToHistory","targetId":null,"waitType":"debounce"}],"hidden":false,"invalid":false,"loading":false,"pattern":"","autoFill":"","disabled":"{{!addParticipant.data}}","readOnly":false,"required":false,"_validate":false,"iconAfter":"","labelWrap":false,"maxLength":null,"minLength":null,"showClear":false,"textAfter":"","iconBefore":"","labelAlign":"left","labelWidth":"33","spellCheck":false,"textBefore":"","formDataKey":"{{ self.id }}","patternType":"","placeholder":"Enter text","tooltipText":"","autoComplete":false,"inputTooltip":"","labelCaption":"","showInEditor":false,"labelPosition":"left","autoCapitalize":"none","labelWidthUnit":"%","customValidation":"","validationMessage":"","showCharacterCount":false,"hideValidationMessage":false,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-09-12T19:58:40.879Z","namespace":null,"position2":{"col":0,"row":11,"width":11,"height":1,"tabNum":0,"rowGroup":"body","container":"chatContainer","subcontainer":"d9fee"},"updatedAt":"2022-11-18T00:31:47.715Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"chatContainer":{"id":"chatContainer","type":"widget","style":{},"folder":"","screen":null,"subtype":"ContainerWidget2","tabIndex":null,"template":{"_ids":["d9fee"],"views":[],"events":{},"hidden":"true","labels":[],"_labels":[""],"hovered":false,"loading":false,"disabled":false,"itemMode":"static","showBody":true,"viewKeys":[],"_viewKeys":["View 1"],"clickable":false,"heightType":"fixed","showFooter":false,"showHeader":true,"transition":"none","iconByIndex":[],"tooltipText":"","_iconByIndex":[""],"overflowType":"hidden","showInEditor":false,"hiddenByIndex":[],"hoistFetching":true,"_hiddenByIndex":[""],"currentViewKey":null,"tooltipByIndex":[],"_tooltipByIndex":[""],"disabledByIndex":[],"_disabledByIndex":[""],"currentViewIndex":null,"iconPositionByIndex":[],"_iconPositionByIndex":[""],"_hasMigratedNestedItems":true,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-08-23T08:59:35.602Z","namespace":null,"position2":{"col":4,"row":1.6653345369377348e-16,"width":4,"height":13.799999999999999,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-09-08T16:46:44.789Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"jsonExplorer1":{"id":"jsonExplorer1","type":"widget","style":{},"folder":"","screen":null,"subtype":"JSONExplorerWidget","tabIndex":null,"template":{"html":false,"value":"{{twilioConversationsCustomComponent.model}}","expandNodes":true},"container":"","createdAt":"2022-09-07T16:52:07.052Z","namespace":null,"position2":{"col":0,"row":0,"width":12,"height":12.200000000000001,"tabNum":0,"rowGroup":"body","container":"modelViewerContainer","subcontainer":"07571"},"updatedAt":"2022-09-13T20:56:40.788Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"addParticipant":{"id":"addParticipant","type":"datasource","style":null,"folder":"writes","screen":null,"subtype":"OpenAPIQuery","tabIndex":null,"template":{"data":null,"path":"/v1/Services/{ChatServiceSid}/Conversations/{ConversationSid}/Participants","error":null,"query":"","events":[],"method":"post","server":null,"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"parameters":"{\"ConversationSid\":\"{{ twilioConversationsCustomComponent.model.conversationSid }}\",\"ChatServiceSid\":\"{{conversationsServiceIdInput.value}}\"}","cacheKeyTtl":"","operationId":"CreateServiceConversationParticipant","requestBody":"{\"MessagingBinding.Address\":\"{{customerNumberInput.value}}\",\"MessagingBinding.ProxyAddress\":\"{{twilioNumberInput.value}}\"}","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","autoPaginate":false,"queryTimeout":"10000","specBasePath":null,"allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","serverVariables":"{}","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"specPathOverride":"https://specs.retool.com/specs/twilio/twilio_conversations_v1/3.0.1/1.9.0.json","autoPaginateLimit":500,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":true,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":false,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":"","importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"parameterDynamicStates":"{\"ChatServiceSid\":false,\"ConversationSid\":false,\"X-Twilio-Webhook-Enabled\":false}","queryFailureConditions":"","requestBodyDynamicStates":"{\"Attributes\":false,\"DateCreated\":false,\"DateUpdated\":false,\"Identity\":false,\"MessagingBinding.Address\":false,\"MessagingBinding.ProjectedAddress\":false,\"MessagingBinding.ProxyAddress\":false,\"RoleSid\":false}","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-11-18T00:18:27.200Z","namespace":null,"position2":null,"updatedAt":"2022-11-18T00:24:49.249Z","resourceName":"1701d6b5-6146-420e-8127-b8da8c78b1da","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"loadingSpinner":{"id":"loadingSpinner","type":"widget","style":{},"folder":"","screen":null,"subtype":"HTMLWidget","tabIndex":null,"template":{"css":".flexbox {\n  justify-content:center;\n  display:flex;\n}\n.loader {\n            \n  \t\t\t\t\tborder: 16px solid transparent;\n            border-top: 16px solid blue;\n            border-radius: 50%;\n            width: 120px;\n            height: 120px;\n            animation: spinloader 2s linear infinite;\n        }\n  \n        .loader img {\n            height: 120px;\n            width: 120px;\n            animation: spinlogo 2s linear infinite;\n        }\n  \n        @keyframes spinloader {\n            0% {\n                transform: rotate(0deg);\n            }\n  \n            100% {\n                transform: rotate(360deg);\n            }\n        }\n","html":"<div class=\"flexbox\">\n  <div style=\"font-family:sans-serif;\">Twilio Conversations initializing...\n\t<div class=\"loader\" />\n</div>","hidden":false,"tooltipText":"","showInEditor":false,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-09-08T16:45:34.456Z","namespace":null,"position2":{"col":5,"row":17.2,"width":3,"height":0.2,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-09-19T22:32:07.911Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"messageHistory":{"id":"messageHistory","type":"state","style":null,"folder":"tempState","screen":null,"subtype":"State","tabIndex":null,"template":{"value":"[]","persistValue":false,"persistedValueKey":"","_persistedValueGetter":null,"_persistedValueSetter":null},"container":"","createdAt":"2022-09-07T22:30:38.245Z","namespace":null,"position2":null,"updatedAt":"2022-09-07T22:35:33.805Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"containerTitle1":{"id":"containerTitle1","type":"widget","style":{},"folder":"","screen":null,"subtype":"TextWidget2","tabIndex":null,"template":{"value":"#### Real-time SMS","hidden":false,"heightType":"auto","imageWidth":"fit","tooltipText":"","overflowType":"scroll","showInEditor":false,"verticalAlign":"center","disableMarkdown":false,"horizontalAlign":"left","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-08-23T08:59:35.882Z","namespace":null,"position2":{"col":0,"row":0,"width":12,"height":0.6,"tabNum":0,"rowGroup":"header","container":"chatContainer","subcontainer":""},"updatedAt":"2022-09-19T22:06:21.934Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"containerTitle2":{"id":"containerTitle2","type":"widget","style":{},"folder":"","screen":null,"subtype":"TextWidget2","tabIndex":null,"template":{"value":"#### SMS settings","hidden":false,"heightType":"auto","imageWidth":"fit","tooltipText":"","overflowType":"scroll","showInEditor":false,"verticalAlign":"center","disableMarkdown":false,"horizontalAlign":"left","maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-08-23T22:39:28.735Z","namespace":null,"position2":{"col":0,"row":0,"width":12,"height":0.6,"tabNum":0,"rowGroup":"header","container":"smsSettingsContainer","subcontainer":""},"updatedAt":"2022-08-23T22:39:43.238Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"getConversations":{"id":"getConversations","type":"datasource","style":null,"folder":"gets","screen":null,"subtype":"OpenAPIQuery","tabIndex":null,"template":{"data":null,"path":"/v1/Services/{ChatServiceSid}/Conversations","error":null,"query":"","events":[],"method":"get","server":null,"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"parameters":"{\"ChatServiceSid\":\"{{conversationsServiceIdInput.value}}\"}","cacheKeyTtl":"","operationId":"ListServiceConversation","requestBody":null,"transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","autoPaginate":false,"queryTimeout":"10000","specBasePath":null,"allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","serverVariables":"{}","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"specPathOverride":"https://specs.retool.com/specs/twilio/twilio_conversations_v1/3.0.1/1.9.0.json","autoPaginateLimit":500,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":false,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":false,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":"","importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"parameterDynamicStates":"{\"PageSize\":false}","queryFailureConditions":"","requestBodyDynamicStates":"{\"Attributes\":false,\"DateCreated\":false,\"DateUpdated\":false,\"FriendlyName\":false,\"MessagingServiceSid\":false,\"State\":false,\"Timers.Closed\":false,\"Timers.Inactive\":false,\"UniqueName\":false}","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-09-07T16:21:25.284Z","namespace":null,"position2":null,"updatedAt":"2022-11-18T00:56:03.772Z","resourceName":"1701d6b5-6146-420e-8127-b8da8c78b1da","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"messagesListView":{"id":"messagesListView","type":"widget","style":{},"folder":"","screen":null,"subtype":"ListViewWidget","tabIndex":null,"template":{"data":"","instances":"{{ messageHistory.value.length }}","heightType":"fixed","itemHeight":"3","showBorder":false,"formDataKey":"{{ self.id }}","overflowType":"scroll","showDropShadow":false,"dynamicHeightsEnabled":true},"container":"","createdAt":"2022-08-23T09:01:37.241Z","namespace":null,"position2":{"col":0,"row":-3.885780586188048e-16,"width":12,"height":10.8,"tabNum":0,"rowGroup":"body","container":"chatContainer","subcontainer":"d9fee"},"updatedAt":"2022-09-12T18:30:36.029Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"twilioNumberInput":{"id":"twilioNumberInput","type":"widget","style":{},"folder":"","screen":null,"subtype":"TextInputWidget2","tabIndex":null,"template":{"label":"Twilio outbound #","value":"","events":{},"hidden":false,"invalid":false,"loading":false,"pattern":"","autoFill":"","disabled":false,"readOnly":false,"required":true,"_validate":false,"iconAfter":"","labelWrap":false,"maxLength":null,"minLength":null,"showClear":false,"textAfter":"","iconBefore":"","labelAlign":"left","labelWidth":"33","spellCheck":false,"textBefore":"","formDataKey":"{{ self.id }}","patternType":"","placeholder":"Enter value","tooltipText":"","autoComplete":false,"inputTooltip":"","labelCaption":"","showInEditor":false,"labelPosition":"left","autoCapitalize":"none","labelWidthUnit":"%","customValidation":"","validationMessage":"","showCharacterCount":false,"hideValidationMessage":false,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-09-20T23:25:50.006Z","namespace":null,"position2":{"col":0,"row":0,"width":12,"height":1,"tabNum":0,"rowGroup":"body","container":"smsSettingsContainer","subcontainer":"b21d2"},"updatedAt":"2022-10-28T16:51:17.947Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"lastInboundMessage":{"id":"lastInboundMessage","type":"state","style":null,"folder":"tempState","screen":null,"subtype":"State","tabIndex":null,"template":{"value":null,"persistValue":false,"persistedValueKey":"","_persistedValueGetter":null,"_persistedValueSetter":null},"container":"","createdAt":"2022-09-08T16:59:48.944Z","namespace":null,"position2":null,"updatedAt":"2022-09-08T16:59:48.944Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"addInboundToHistory":{"id":"addInboundToHistory","type":"datasource","style":null,"folder":"js","screen":null,"subtype":"JavascriptQuery","tabIndex":null,"template":{"data":null,"error":null,"query":"// Usage: Process inbound messags\n// Triggered by: Success event handler on listenForModelUpdates\n\nconst history = messageHistory.value;\n\n// Get the last inbound message from temp state\nconst lastInbound = lastInboundMessage.value;\n\n// Get the new inbound message from the custom component model\nconst newInbound = twilioConversationsCustomComponent.model.inbound;\n\n// If the new inbound message hasn't been processed yet...\nif (lastInbound != newInbound) {\n  // Push the message to messageHistory temp state\n  const payload = { message: newInbound, direction: \"inbound\" };\n  history.push(payload);\n  messageHistory.setValue(history);\n\n  // Update the last processed inbound message temp state\n  lastInboundMessage.setValue(newInbound);\n}\n","events":[],"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"cacheKeyTtl":"","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","queryTimeout":"10000","allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":false,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":false,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":null,"importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"queryFailureConditions":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-09-07T22:32:05.380Z","namespace":null,"position2":null,"updatedAt":"2022-09-13T21:14:32.440Z","resourceName":"JavascriptQuery","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"customerNumberInput":{"id":"customerNumberInput","type":"widget","style":{},"folder":"","screen":null,"subtype":"TextInputWidget2","tabIndex":null,"template":{"label":"Customer #","value":"","events":[],"hidden":false,"invalid":false,"loading":false,"pattern":"","autoFill":"","disabled":false,"readOnly":false,"required":true,"_validate":false,"iconAfter":"","labelWrap":false,"maxLength":null,"minLength":null,"showClear":false,"textAfter":"","iconBefore":"","labelAlign":"left","labelWidth":"33","spellCheck":false,"textBefore":"","formDataKey":"{{ self.id }}","patternType":"","placeholder":"Enter phone number","tooltipText":"","autoComplete":false,"inputTooltip":"","labelCaption":"","showInEditor":false,"labelPosition":"left","autoCapitalize":"none","labelWidthUnit":"%","customValidation":"","validationMessage":"","showCharacterCount":false,"hideValidationMessage":false,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-08-23T22:39:52.612Z","namespace":null,"position2":{"col":0,"row":1,"width":12,"height":1,"tabNum":0,"rowGroup":"body","container":"smsSettingsContainer","subcontainer":"b21d2"},"updatedAt":"2022-10-28T16:51:21.756Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"deleteConversations":{"id":"deleteConversations","type":"datasource","style":null,"folder":"writes","screen":null,"subtype":"OpenAPIQuery","tabIndex":null,"template":{"data":null,"path":"/v1/Services/{ChatServiceSid}/Conversations/{Sid}","error":null,"query":"","events":[],"method":"delete","server":null,"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"parameters":"{\"Sid\":\"{{sid}}\",\"ChatServiceSid\":\"{{conversationsServiceIdInput.value}}\"}","cacheKeyTtl":"","operationId":"DeleteServiceConversation","requestBody":null,"transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","autoPaginate":false,"queryTimeout":"10000","specBasePath":null,"allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","serverVariables":"{}","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"specPathOverride":"https://specs.retool.com/specs/twilio/twilio_conversations_v1/3.0.1/1.9.0.json","autoPaginateLimit":500,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":false,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":false,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":null,"importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"parameterDynamicStates":"{\"Sid\":false,\"X-Twilio-Webhook-Enabled\":false}","queryFailureConditions":"","requestBodyDynamicStates":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-11-18T00:26:01.763Z","namespace":null,"position2":null,"updatedAt":"2022-11-18T00:26:47.423Z","resourceName":"1701d6b5-6146-420e-8127-b8da8c78b1da","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"addOutboundToHistory":{"id":"addOutboundToHistory","type":"datasource","style":null,"folder":"js","screen":null,"subtype":"JavascriptQuery","tabIndex":null,"template":{"data":null,"error":null,"query":"// Usage: Processes outbound messages and pushes them to the twilioConversationsCustomComponent\n// Triggered by: Submit event handler on messageInput\n\nconst outboundMessage = messageInput.value;\n\n// Push the outbound message to the Conversations custom component\ntwilioConversationsCustomComponent.updateModel({ outbound: outboundMessage });\n\n// Get current state of message history\nconst history = messageHistory.value;\n\n// Append the outbound message to history\nconst payload = { message: outboundMessage, direction: \"outbound\" };\nhistory.push(payload);\n\n// Save updated history to temp state\nmessageHistory.setValue(history);\n\n// Clear the messageInput component for the next message\nmessageInput.clearValue();\n","events":[],"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"cacheKeyTtl":"","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","queryTimeout":"10000","allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"{{!addParticipant.data}}","watchedParams":[],"successMessage":"","changesetObject":"","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":false,"showSuccessToaster":false,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":false,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":null,"importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"queryFailureConditions":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-09-07T22:45:20.034Z","namespace":null,"position2":null,"updatedAt":"2022-11-18T00:31:30.366Z","resourceName":"JavascriptQuery","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"listenForEmojiSelect":{"id":"listenForEmojiSelect","type":"datasource","style":null,"folder":"js","screen":null,"subtype":"SqlTransformQuery","tabIndex":null,"template":{"data":null,"error":null,"query":"-- Listen for updates to the emoji key on the emojiPickerCustomComponent model to trigger event handlers \nselect\n  *\nfrom\n  {{emojiPickerCustomComponent.model.emoji}}","events":[{"type":"widget","event":"success","method":"setValue","params":{"value":"{{messageInput.value + emojiPickerCustomComponent.model.emoji}}"},"waitMs":"0","enabled":"{{emojiPickerCustomComponent.model.emoji}}","pluginId":"messageInput","targetId":null,"waitType":"debounce"},{"type":"widget","event":"success","method":"focus","params":{},"waitMs":"0","pluginId":"messageInput","targetId":null,"waitType":"debounce"}],"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"cacheKeyTtl":"","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","queryTimeout":"10000","allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":true,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":true,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":null,"importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"queryFailureConditions":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-09-12T16:56:49.488Z","namespace":null,"position2":null,"updatedAt":"2022-09-13T21:18:38.920Z","resourceName":"SQL Transforms","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"modelViewerContainer":{"id":"modelViewerContainer","type":"widget","style":{},"folder":"","screen":null,"subtype":"ContainerWidget2","tabIndex":null,"template":{"_ids":["07571"],"views":[],"events":{},"hidden":"true","labels":[],"_labels":[""],"hovered":false,"loading":false,"disabled":false,"itemMode":"static","showBody":"{{modelToggle.value}}","viewKeys":[],"_viewKeys":["View 1"],"clickable":false,"heightType":"auto","showFooter":false,"showHeader":true,"transition":"none","iconByIndex":[],"tooltipText":"","_iconByIndex":[""],"overflowType":"scroll","showInEditor":false,"hiddenByIndex":[],"hoistFetching":true,"_hiddenByIndex":[""],"currentViewKey":null,"tooltipByIndex":[],"_tooltipByIndex":[""],"disabledByIndex":[],"_disabledByIndex":[""],"currentViewIndex":null,"iconPositionByIndex":[],"_iconPositionByIndex":[""],"_hasMigratedNestedItems":true,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-09-08T16:22:29.461Z","namespace":null,"position2":{"col":0,"row":3.4000000000000066,"width":4,"height":13.2,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-09-12T20:10:54.675Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"smsSettingsContainer":{"id":"smsSettingsContainer","type":"widget","style":{},"folder":"","screen":null,"subtype":"ContainerWidget2","tabIndex":null,"template":{"_ids":["b21d2"],"views":[],"events":{},"hidden":"true","labels":[],"_labels":[""],"hovered":false,"loading":false,"disabled":false,"itemMode":"static","showBody":true,"viewKeys":[],"_viewKeys":["View 1"],"clickable":false,"heightType":"auto","showFooter":true,"showHeader":true,"transition":"none","iconByIndex":[],"tooltipText":"","_iconByIndex":[""],"overflowType":"scroll","showInEditor":false,"hiddenByIndex":[],"hoistFetching":true,"_hiddenByIndex":[""],"currentViewKey":null,"tooltipByIndex":[],"_tooltipByIndex":[""],"disabledByIndex":[],"_disabledByIndex":[""],"currentViewIndex":null,"iconPositionByIndex":[],"_iconPositionByIndex":[""],"_hasMigratedNestedItems":true,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-08-23T22:39:28.573Z","namespace":null,"position2":{"col":0,"row":0.7999999999999994,"width":4,"height":0.2,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-09-19T23:21:46.166Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"emojiPickerVisibility":{"id":"emojiPickerVisibility","type":"state","style":null,"folder":"tempState","screen":null,"subtype":"State","tabIndex":null,"template":{"value":"true","persistValue":false,"persistedValueKey":"","_persistedValueGetter":null,"_persistedValueSetter":null},"container":"","createdAt":"2022-09-12T16:53:20.255Z","namespace":null,"position2":null,"updatedAt":"2022-09-12T16:53:36.709Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"listenForModelUpdates":{"id":"listenForModelUpdates","type":"datasource","style":null,"folder":"js","screen":null,"subtype":"SqlTransformQuery","tabIndex":null,"template":{"data":null,"error":null,"query":"-- Listen for updates to the inbound key on the webSocketCustomComponent model to trigger event handlers\nselect\n  *\nfrom\n  {{ twilioConversationsCustomComponent.model.inbound }}","events":[{"type":"datasource","event":"success","method":"trigger","params":{},"waitMs":"0","pluginId":"addInboundToHistory","targetId":null,"waitType":"debounce"}],"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"cacheKeyTtl":"","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","queryTimeout":"10000","allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":true,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":true,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":"","importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"queryFailureConditions":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-09-07T22:29:35.927Z","namespace":null,"position2":null,"updatedAt":"2022-09-13T21:02:45.847Z","resourceName":"SQL Transforms","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"listenForMessageDisplayed":{"id":"listenForMessageDisplayed","type":"datasource","style":null,"folder":"js","screen":null,"subtype":"SqlTransformQuery","tabIndex":null,"template":{"data":null,"error":null,"query":"-- Listen for updates to the data key on the messagesListView component to trigger event handlers \nselect\n  *\nfrom\n  {{messagesListView.data}}","events":[{"type":"widget","event":"success","method":"scrollIntoView","params":{"options":{"block":"end"}},"waitMs":"0","pluginId":"message","targetId":null,"waitType":"debounce","pluginInstance":"{{messagesListView.data.length-1}}"}],"rawData":null,"metadata":null,"changeset":"","timestamp":0,"isFetching":false,"isImported":false,"cacheKeyTtl":"","transformer":"// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","queryTimeout":"10000","allowedGroups":[],"enableCaching":false,"privateParams":[],"queryDisabled":"","watchedParams":[],"successMessage":"","changesetObject":"","errorTransformer":"// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","queryRefreshTime":"","runWhenPageLoads":false,"changesetIsObject":false,"enableTransformer":false,"playgroundQueryId":null,"queryThrottleTime":"750","queryTriggerDelay":"0","showFailureToaster":true,"showSuccessToaster":true,"confirmationMessage":null,"importedQueryInputs":{},"playgroundQueryUuid":"","requireConfirmation":false,"runWhenModelUpdates":true,"notificationDuration":"","queryDisabledMessage":"","resourceNameOverride":"","resourceTypeOverride":"","importedQueryDefaults":{},"playgroundQuerySaveId":"latest","runWhenPageLoadsDelay":"","enableErrorTransformer":false,"queryFailureConditions":"","updateSetValueDynamically":false,"lastReceivedFromResourceAt":null,"showLatestVersionUpdatedWarning":false,"showUpdateSetValueDynamicallyToggle":true},"container":"","createdAt":"2022-09-12T19:12:54.364Z","namespace":null,"position2":null,"updatedAt":"2022-09-13T21:19:11.422Z","resourceName":"SQL Transforms","mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"emojiPickerCustomComponent":{"id":"emojiPickerCustomComponent","type":"widget","style":{},"folder":"","screen":null,"subtype":"CustomComponentWidget","tabIndex":null,"template":{"model":"{}","hidden":"{{emojiPickerVisibility.value}}","allowForms":false,"heightType":"fixed","iframeCode":"<!-- Retool custom component model \n{\n    emoji (string): < the most recent unicode emoji selected by the user >\n}\n-->\n\n<!DOCTYPE html>\n<html>\n    <head>\n        <!-- Initialize the emoji picker: https://github.com/nolanlawson/emoji-picker-element/ -->\n        <script type=\"module\" src=\"https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js\"></script>\n    </head>\n    <body>\n        <emoji-picker></emoji-picker>\n        <script>\n            // Define an event handler which pushes the selected emoji to the Retool component model\n            document.querySelector('emoji-picker')\n                .addEventListener('emoji-click', event => window.Retool.modelUpdate({emoji:event.detail.unicode}))\n\n        </script>\n    </body>\n</html>\n","allowCamera":false,"allowModals":false,"allowPopups":false,"allowPayment":false,"allowDownloads":false,"allowFullscreen":false,"allowMicrophone":false,"allowSameOrigin":true,"allowGeolocation":false,"allowTopNavigation":false,"allowPopupsToEscapeSandbox":false},"container":"","createdAt":"2022-09-12T16:46:19.853Z","namespace":null,"position2":{"col":8,"row":0.6000000000000005,"width":4,"height":11.2,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-09-13T17:37:10.364Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"conversationsServiceIdInput":{"id":"conversationsServiceIdInput","type":"widget","style":{},"folder":"","screen":null,"subtype":"TextInputWidget2","tabIndex":null,"template":{"label":"","value":"","events":[],"hidden":false,"invalid":false,"loading":false,"pattern":"","autoFill":"","disabled":false,"readOnly":false,"required":true,"_validate":false,"iconAfter":"","labelWrap":false,"maxLength":null,"minLength":null,"showClear":false,"textAfter":"","iconBefore":"","labelAlign":"left","labelWidth":"33","spellCheck":false,"textBefore":"","formDataKey":"{{ self.id }}","patternType":"","placeholder":"Enter Conversations service SID","tooltipText":"","autoComplete":false,"inputTooltip":"","labelCaption":"","showInEditor":false,"labelPosition":"left","autoCapitalize":"none","labelWidthUnit":"%","customValidation":"","validationMessage":"","showCharacterCount":false,"hideValidationMessage":false,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2022-11-18T00:35:37.593Z","namespace":null,"position2":{"col":0,"row":0.6,"width":12,"height":1,"tabNum":0,"rowGroup":"body","container":"modal1","subcontainer":""},"updatedAt":"2022-11-18T00:35:46.072Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"twilioConversationsCustomComponent":{"id":"twilioConversationsCustomComponent","type":"widget","style":{},"folder":"","screen":null,"subtype":"CustomComponentWidget","tabIndex":null,"template":{"model":"{}","hidden":"","allowForms":false,"heightType":"fixed","iframeCode":"<!-- Retool custom component model\n{\n  browser (string): \"Chrome\" | \"Not Chrome\",\n  conversationCleared (boolean): < set by initialize Retool JS query >,\n  token (string): < a Twilio JWT containing a chat access token >,\n  status: (string): \"The client successfully initialized!\",\n  error: (string): \"The client failed to initialize\",\n  conversationSid (string): < a Twilio SID associated with the active Conversation >,\n  customerNumber (string): < the E.164-formatted phone number of the participating attached to the Conversation>,\n  outbound (string): < the most recent message sent by the Retool user >,\n  inbound (string): < the most recent message received from the customer > \n}\n-->\n\n<!DOCTYPE html>\n<html>\n  <head>\n    <title>Embedded Twilio Conversations Client for Retool</title>\n    <!-- Initialize the Twilio Conversations SDK: https://www.twilio.com/docs/conversations/javascript/changelog#latest-release -->\n    <script\n      src=\"https://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/twilio-conversations.min.js\"\n      integrity=\"sha256-v2SFLWujVq0wnwHpcxct7bzTP8wII7sumEhAKMEqgHQ=\"\n      crossorigin=\"anonymous\"\n    ></script>\n\n    <script>\n      // Parse the Retool user's userAgent to determine if they are using Chrome.\n      // Non-Chrome browsers may restrict access to WebSockets, the technology which powers bi-directional communication between\n      // the Conversations SDK and service.\n      if (navigator.userAgent.indexOf(\"Chrome\") > -1) {\n        window.Retool.modelUpdate({ browser: \"Chrome\" });\n      } else {\n        window.Retool.modelUpdate({ browser: \"Not Chrome\" });\n      }\n\n      // Initialize variables to be used inside of the window.Retool.subscribe function\n      var client;\n      var conversation;\n      var inboundListener;\n      var outboundMessage;\n      var inboundMessage;\n\n      // window.Retool.subscribe is evaluated whenever the Retool custom component model changes: https://docs.retool.com/docs/custom-components#non-react-javascript\n      window.Retool.subscribe(async function (model) {\n        \n        // If a chat token is passed into the model, and the Client object is not yet available...\n        if (model.token && !client && model.conversationsCleared) {\n          client = new Twilio.Conversations.Client(model.token); // Instantiate a new Client: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/#instantiating-and-using\n\n          // Set event handlers on the new Client which trigger log messages: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Client.html#stateChanged\n          client.on(\"stateChanged\", (state) => {\n            if (state === \"failed\") {\n              window.Retool.modelUpdate({\n                // Update the model with the error: https://docs.retool.com/docs/custom-components#non-react-javascript\n                error: \"The client failed to initialize\",\n              });\n            }\n\n            if (state === \"initialized\") {\n              window.Retool.modelUpdate({\n                status: \"The client successfully initialized!\",\n              });\n            }\n          });\n        }\n\n        // If the Client is inititialized and no Conversation has been created...\n        if (client && !conversation) {\n          conversation = \"initializing\"\n          conversation = await client.createConversation(); // Create a Conversation: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Client.html#createConversation\n          await conversation.join(); // Join the Conversation: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Conversation.html#join\n          window.Retool.modelUpdate({ conversationSid: conversation.sid }); // Pass the Conversation SID to the component model\n        }\n\n        // If the Client is initialized, a customer number has been passed to the model, and no inbound message listener has been defined...\n        if (client && model.customerNumber && !inboundListener) {\n          client.on(\"messageAdded\", (message) => {\n            // When a message is added to the conversation: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Client.html#messageAdded\n            if (\n              // If the message author is the customer, and we haven't processed the message already...\n              message.state.author === model.customerNumber &&\n              message.state.body != inboundMessage\n            ) {\n              // Push the message to the component model.\n              inboundMessage = message.state.body;\n              window.Retool.modelUpdate({ inbound: message.state.body });\n            }\n          });\n          inboundListener = true;\n        }\n\n        // If the Client and Conversations are initialized, there is an outbound message on the model, and we haven't procesed it yet...\n        if (\n          client &&\n          conversation &&\n          model.outbound &&\n          model.outbound != outboundMessage\n        ) {\n          outboundMessage = model.outbound;\n          await conversation.sendMessage(outboundMessage); // Send the message: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Conversation.html#sendMessage\n        }\n      });\n    </script>\n  </head>\n  <body>\n    <p style=\"font-family:sans-serif;\">Twilio Conversations Custom Component</p>\n  </body>\n</html>\n","allowCamera":false,"allowModals":false,"allowPopups":false,"allowPayment":false,"showInEditor":false,"allowDownloads":false,"allowFullscreen":false,"allowMicrophone":false,"allowSameOrigin":false,"allowGeolocation":false,"allowTopNavigation":false,"allowPopupsToEscapeSandbox":false},"container":"","createdAt":"2022-06-07T23:09:47.016Z","namespace":null,"position2":{"col":0,"row":16.599999999999998,"width":4,"height":1.5999999999999999,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-11-18T22:15:58.937Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null}},"version":"2.103.2","appStyles":"","createdAt":null,"appThemeId":null,"isFetching":false,"rootScreen":null,"isMobileApp":false,"testEntities":[],"isGlobalWidget":false,"customShortcuts":[],"customDocumentTitle":"","preloadedAppJSLinks":[],"markdownLinkBehavior":"never","multiScreenMobileApp":false,"queryStatusVisibility":true,"instrumentationEnabled":false,"pageLoadValueOverrides":[],"preloadedAppJavaScript":null,"urlFragmentDefinitions":[],"experimentalPerfFeatures":{"useRuntimeV2":false,"serverDepGraphEnabled":false,"batchCommitModelEnabled":false,"skipDepCycleCheckingEnabled":false},"responsiveLayoutDisabled":false,"inAppRetoolPillAppearance":"NO_OVERRIDE","loadingIndicatorsDisabled":false,"customDocumentTitleEnabled":false,"experimentalDataTabEnabled":false,"experimentalStabilityFeatures":{"lockModelForUpdates":false}}}},{"type":"WIDGET_TEMPLATE_UPDATE","payload":{"plugin":{"id":"twilioConversationsCustomComponent","type":"widget","style":{},"folder":"","screen":null,"subtype":"CustomComponentWidget","tabIndex":null,"template":{"model":"{}","hidden":"","allowForms":false,"heightType":"fixed","iframeCode":"<!-- Retool custom component model\n{\n  browser (string): \"Chrome\" | \"Not Chrome\",\n  conversationCleared (boolean): < set by initialize Retool JS query >,\n  token (string): < a Twilio JWT containing a chat access token >,\n  status: (string): \"The client successfully initialized!\",\n  error: (string): \"The client failed to initialize\",\n  conversationSid (string): < a Twilio SID associated with the active Conversation >,\n  customerNumber (string): < the E.164-formatted phone number of the participating attached to the Conversation>,\n  outbound (string): < the most recent message sent by the Retool user >,\n  inbound (string): < the most recent message received from the customer > \n}\n-->\n\n<!DOCTYPE html>\n<html>\n  <head>\n    <title>Embedded Twilio Conversations Client for Retool</title>\n    <!-- Initialize the Twilio Conversations SDK: https://www.twilio.com/docs/conversations/javascript/changelog#latest-release -->\n    <script\n      src=\"https://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/twilio-conversations.min.js\"\n      integrity=\"sha256-v2SFLWujVq0wnwHpcxct7bzTP8wII7sumEhAKMEqgHQ=\"\n      crossorigin=\"anonymous\"\n    ></script>\n\n    <script>\n      // Parse the Retool user's userAgent to determine if they are using Chrome.\n      // Non-Chrome browsers may restrict access to WebSockets, the technology which powers bi-directional communication between\n      // the Conversations SDK and service.\n      if (navigator.userAgent.indexOf(\"Chrome\") > -1) {\n        window.Retool.modelUpdate({ browser: \"Chrome\" });\n      } else {\n        window.Retool.modelUpdate({ browser: \"Not Chrome\" });\n      }\n\n      // Initialize variables to be used inside of the window.Retool.subscribe function\n      var client;\n      var conversation;\n      var inboundListener;\n      var outboundMessage;\n      var inboundMessage;\n\n      // window.Retool.subscribe is evaluated whenever the Retool custom component model changes: https://docs.retool.com/docs/custom-components#non-react-javascript\n      window.Retool.subscribe(async function (model) {\n        \n        // If a chat token is passed into the model, and the Client object is not yet available...\n        if (model.token && !client && model.conversationsCleared) {\n          client = new Twilio.Conversations.Client(model.token); // Instantiate a new Client: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/#instantiating-and-using\n\n          // Set event handlers on the new Client which trigger log messages: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Client.html#stateChanged\n          client.on(\"stateChanged\", (state) => {\n            if (state === \"failed\") {\n              window.Retool.modelUpdate({\n                // Update the model with the error: https://docs.retool.com/docs/custom-components#non-react-javascript\n                error: \"The client failed to initialize\",\n              });\n            }\n\n            if (state === \"initialized\") {\n              window.Retool.modelUpdate({\n                status: \"The client successfully initialized!\",\n              });\n            }\n          });\n        }\n\n        // If the Client is inititialized and no Conversation has been created...\n        if (client && !conversation) {\n          conversation = \"initializing\"\n          conversation = await client.createConversation(); // Create a Conversation: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Client.html#createConversation\n          await conversation.join(); // Join the Conversation: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Conversation.html#join\n          window.Retool.modelUpdate({ conversationSid: conversation.sid }); // Pass the Conversation SID to the component model\n        }\n\n        // If the Client is initialized, a customer number has been passed to the model, and no inbound message listener has been defined...\n        if (client && model.customerNumber && !inboundListener) {\n          client.on(\"messageAdded\", (message) => {\n            // When a message is added to the conversation: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Client.html#messageAdded\n            if (\n              // If the message author is the customer, and we haven't processed the message already...\n              message.state.author === model.customerNumber &&\n              message.state.body != inboundMessage\n            ) {\n              // Push the message to the component model.\n              inboundMessage = message.state.body;\n              window.Retool.modelUpdate({ inbound: message.state.body });\n            }\n          });\n          inboundListener = true;\n        }\n\n        // If the Client and Conversations are initialized, there is an outbound message on the model, and we haven't procesed it yet...\n        if (\n          client &&\n          conversation &&\n          model.outbound &&\n          model.outbound != outboundMessage\n        ) {\n          outboundMessage = model.outbound;\n          await conversation.sendMessage(outboundMessage); // Send the message: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Conversation.html#sendMessage\n        }\n      });\n    </script>\n  </head>\n  <body>\n    <p style=\"font-family:sans-serif;\">Twilio Conversations Custom Component</p>\n  </body>\n</html>\n","allowCamera":false,"allowModals":false,"allowPopups":false,"allowPayment":false,"showInEditor":false,"allowDownloads":false,"allowFullscreen":false,"allowMicrophone":false,"allowSameOrigin":false,"allowGeolocation":false,"allowTopNavigation":false,"allowPopupsToEscapeSandbox":false},"container":"","createdAt":"2022-06-07T23:09:47.016Z","namespace":null,"position2":{"col":0,"row":16.599999999999998,"width":4,"height":1.5999999999999999,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2022-11-18T22:15:58.937Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"update":{"iframeCode":"<!-- Retool custom component model\n{\n  browser (string): \"Chrome\" | \"Not Chrome\",\n  conversationCleared (boolean): < set by initialize Retool JS query >,\n  token (string): < a Twilio JWT containing a chat access token >,\n  status: (string): \"The client successfully initialized!\",\n  error: (string): \"The client failed to initialize\",\n  conversationSid (string): < a Twilio SID associated with the active Conversation >,\n  customerNumber (string): < the E.164-formatted phone number of the participating attached to the Conversation>,\n  outbound (string): < the most recent message sent by the Retool user >,\n  inbound (string): < the most recent message received from the customer > \n}\n-->\n\n<!DOCTYPE html>\n<html>\n  <head>\n    <title>Embedded Twilio Conversations Client for Retool</title>\n    <!-- Initialize the Twilio Conversations SDK: https://www.twilio.com/docs/conversations/javascript/changelog#latest-release -->\n    <script\n      src=\"https://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/twilio-conversations.min.js\"\n      integrity=\"sha256-v2SFLWujVq0wnwHpcxct7bzTP8wII7sumEhAKMEqgHQ=\"\n      crossorigin=\"anonymous\"\n    ></script>\n\n    <script>\n      // Parse the Retool user's userAgent to determine if they are using Chrome.\n      // Non-Chrome browsers may restrict access to WebSockets, the technology which powers bi-directional communication between\n      // the Conversations SDK and service.\n      if (navigator.userAgent.indexOf(\"Chrome\") > -1) {\n        window.Retool.modelUpdate({ browser: \"Chrome\" });\n      } else {\n        window.Retool.modelUpdate({ browser: \"Not Chrome\" });\n      }\n\n      // Initialize variables to be used inside of the window.Retool.subscribe function\n      var client;\n      var conversation;\n      var inboundListener;\n      var outboundMessage;\n      var inboundMessage;\n\n      // window.Retool.subscribe is evaluated whenever the Retool custom component model changes: https://docs.retool.com/docs/custom-components#non-react-javascript\n      window.Retool.subscribe(async function (model) {\n        \n        // If a chat token is passed into the model, and the Client object is not yet available...\n        if (model.token && !client && model.conversationsCleared) {\n          client = new Twilio.Conversations.Client(model.token); // Instantiate a new Client: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/#instantiating-and-using\n\n          // Set event handlers on the new Client which trigger log messages: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Client.html#stateChanged\n          client.on(\"stateChanged\", (state) => {\n            if (state === \"failed\") {\n              window.Retool.modelUpdate({\n                // Update the model with the error: https://docs.retool.com/docs/custom-components#non-react-javascript\n                error: \"The client failed to initialize\",\n              });\n            }\n\n            if (state === \"initialized\") {\n              window.Retool.modelUpdate({\n                status: \"The client successfully initialized!\",\n              });\n            }\n          });\n        }\n\n        // If the Client is inititialized and no Conversation has been created...\n        if (client && !conversation) {\n          conversation = \"initializing\";\n          conversation = await client.createConversation(); // Create a Conversation: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Client.html#createConversation\n          await conversation.join(); // Join the Conversation: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Conversation.html#join\n          window.Retool.modelUpdate({ conversationSid: conversation.sid }); // Pass the Conversation SID to the component model\n        }\n\n        // If the Client is initialized, a customer number has been passed to the model, and no inbound message listener has been defined...\n        if (client && model.customerNumber && !inboundListener) {\n          client.on(\"messageAdded\", (message) => {\n            // When a message is added to the conversation: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Client.html#messageAdded\n            if (\n              // If the message author is the customer, and we haven't processed the message already...\n              message.state.author === model.customerNumber &&\n              message.state.body != inboundMessage\n            ) {\n              // Push the message to the component model.\n              inboundMessage = message.state.body;\n              window.Retool.modelUpdate({ inbound: message.state.body });\n            }\n          });\n          inboundListener = true;\n        }\n\n        // If the Client and Conversations are initialized, there is an outbound message on the model, and we haven't procesed it yet...\n        if (\n          client &&\n          conversation &&\n          model.outbound &&\n          model.outbound != outboundMessage\n        ) {\n          outboundMessage = model.outbound;\n          await conversation.sendMessage(outboundMessage); // Send the message: http://media.twiliocdn.com/sdk/js/conversations/releases/2.1.0/docs/classes/Conversation.html#sendMessage\n        }\n      });\n    </script>\n  </head>\n  <body>\n    <p style=\"font-family:sans-serif;\">Twilio Conversations Custom Component</p>\n  </body>\n</html>\n"},"widgetId":"twilioConversationsCustomComponent","shouldRecalculateTemplate":true},"isUserTriggered":true}],"gitSha":null,"checksum":null,"createdAt":"2022-11-18T22:21:28.881Z","updatedAt":"2022-11-18T22:21:28.881Z","pageId":1599557,"userId":275660,"branchId":null},"modules":{}}