@cognigy/rest-api-client
Version:
Cognigy REST-Client
243 lines (233 loc) • 7.91 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SET_HTML_APP_STATE = exports.formExampleDOM = exports.getHTML = void 0;
/* Custom modules */
const createNodeDescriptor_1 = require("../../createNodeDescriptor");
const setAdaptiveCardAppState_1 = require("./setAdaptiveCardAppState");
const getXAppsOverlaySettings_1 = require("./utils/getXAppsOverlaySettings");
;
const getHTML = (body) => /* html */ `<!DOCTYPE html>
<html lang="en">
<head>
<!--
loads the xApp Page SDK, provided by Cognigy,
exposed as a global variable called "SDK".
-->
<script src="/sdk/app-page-sdk.js"></script>
${formExampleScript}
</head>
<body>
${body}
</body>
</html>
`;
exports.getHTML = getHTML;
const submitStaticValuesExample = /* html */ `
<!--
Example: Submitting fixed values
This example shows how to submit fixed values by clicking a button.
Clicking the "OK" button will submit { option: "ok" },
while clicking the "Cancel" button will submit { option: "cancel" }
-->
<!--
<button type="button" onclick="SDK.submit({ option: 'ok' })">OK</button>
<button type="button" onclick="SDK.submit({ option: 'cancel' })">Cancel</button>
-->
`;
const formExampleComment = /* html */ `<!--
Example: Form Submission
This example shows how you can use native HTML
form functionality to submit data from your xApp.
We're rendering a simple form with a text input
and a submit button.
The "name" attribute is important and will be used
to identify this field in the result!
Using this example, the end user can type a nickname
and submit it either via the button or by hitting "return".
The script will pick the first "form" element on the page
and configures it to submit its result via the "xApp Page SDK"
-->`;
exports.formExampleDOM = `<form>
<input
name="nickname"
placeholder="your nickname"
/>
<button>submit</button>
</form>
`;
const formExampleScript = /* html */ `<script data-form-example>
window.addEventListener("load", () => {
const form = document.querySelector('form');
form.onsubmit = e => {
e.preventDefault();
e.stopPropagation();
const formData = new FormData(form);
const values = [...formData.entries()].reduce((obj, [key, value]) => {
obj[key] = value;
return obj;
}, {});
SDK.submit(values);
};
});
</script>
`;
const defaultFullHTMLDocument = (0, exports.getHTML)(`
${formExampleComment}
${exports.formExampleDOM}
${submitStaticValuesExample}
`);
/**
* Node name: 'setHTMLAppState'
*
* Purpose:
* Set the state of an HTML xApp.
*/
exports.SET_HTML_APP_STATE = (0, createNodeDescriptor_1.createNodeDescriptor)({
type: "setHTMLAppState",
defaultLabel: "xApp: Show HTML",
summary: "UI__NODE_EDITOR__SET_HTML_APP_STATE__SUMMARY",
appearance: {
showIcon: false,
},
fields: [
{
key: "mode",
type: "select",
label: "UI__NODE_EDITOR__SET_HTML_APP_STATE__MODE__LABEL",
defaultValue: "body",
params: {
options: [
{
label: "UI__NODE_EDITOR__SET_HTML_APP_STATE__MODE__BODY__LABEL",
value: "body",
},
{
label: "UI__NODE_EDITOR__SET_HTML_APP_STATE__MODE__FULL__LABEL",
value: "full",
},
],
},
},
{
key: "html",
type: "xml",
label: "UI__NODE_EDITOR__SET_HTML_APP_STATE__HTML__LABEL",
defaultValue: defaultFullHTMLDocument,
condition: {
key: "mode",
value: "body",
negate: true,
},
},
{
key: "body",
type: "xml",
label: "UI__NODE_EDITOR__SET_HTML_APP_STATE__BODY__LABEL",
defaultValue: exports.formExampleDOM,
condition: {
key: "mode",
value: "body",
},
},
{
key: "waitForInput",
type: "toggle",
label: "UI__NODE_EDITOR__SET_HTML_APP_STATE__WAIT_FOR_INPUT__LABEL",
defaultValue: false,
},
{
key: "storeResultInContext",
type: "toggle",
label: "UI__NODE_EDITOR__SET_HTML_APP_STATE__STORE_RESULT_IN_CONTEXT__LABEL",
condition: {
key: "waitForInput",
value: true
}
},
{
key: "contextKey",
type: "cognigyText",
label: "UI__NODE_EDITOR__SET_HTML_APP_STATE__CONTEXT_KEY__LABEL",
defaultValue: "result",
condition: {
and: [
{
key: "waitForInput",
value: true
}, {
key: "storeResultInContext",
value: true
}
]
},
},
...(0, getXAppsOverlaySettings_1.getXAppsOverlaySettingsFields)(),
],
sections: [
{
key: "waitingBehavior",
defaultCollapsed: true,
fields: ["waitForInput", "storeResultInContext", "contextKey"],
label: "UI__NODE_EDITOR__SET_HTML_APP_STATE__WAITING_BEHAVIOR__LABEL",
},
(0, getXAppsOverlaySettings_1.getXAppsOverlaySettingsSection)(),
],
form: [
{ type: "field", key: "mode" },
{ type: "field", key: "html" },
{ type: "field", key: "body" },
{ type: "section", key: "waitingBehavior" },
{ type: "section", key: (0, getXAppsOverlaySettings_1.getXAppsOverlaySettingsSection)().key },
],
tags: ["basic", "apps", "xApps"],
function: async ({ cognigy, config, nodeId }) => {
var _a, _b;
const { api, input, context } = cognigy;
const { html, body, mode, waitForInput, storeResultInContext, contextKey, } = config;
const overlaySettings = {
autoOpen: config.autoOpen,
closeOnSubmit: config.closeOnSubmit,
feedbackMessage: config.feedbackMessage,
screenTitle: config.screenTitle,
sendEventOnCloseIconClick: config.sendEventOnCloseIconClick,
showCloseIcon: config.showCloseIcon,
};
const htmlDocument = (() => {
if (mode !== "full") {
return (0, exports.getHTML)(body);
}
return html;
})();
const systemContextWaitingKey = `xAPPHtmlWaiting-${nodeId}`;
// only set the app state once
if (!api.getSystemContext(systemContextWaitingKey)) {
api.setAppState("generic-html", { html: htmlDocument }, {
webchat3: {
overlaySettingsMetaData: {
overlaySettings,
endpointType: input.endpointType,
url: input.apps.url,
URLToken: input.URLToken
}
}
});
api.logDebugMessage(`UI__DEBUG_MODE__SET_HTML_APP_STATE__MESSAGE`);
}
if (api.getSystemContext(systemContextWaitingKey) && ((_b = (_a = input.data) === null || _a === void 0 ? void 0 : _a._cognigy) === null || _b === void 0 ? void 0 : _b._app)) {
api.deleteSystemContext(systemContextWaitingKey);
(0, setAdaptiveCardAppState_1.setxAppResult)({
input,
storeResultInContext,
contextKey,
context,
});
return;
}
if (waitForInput) {
api.setSystemContext(systemContextWaitingKey, true);
api.setNextNode(nodeId);
api.stopExecution();
}
},
});
//# sourceMappingURL=setHtmlAppState.js.map