Add the chat page

The chat page is an ordinary Fluid component. PeopleSoft serves the chat’s script and styles from its own definitions, so no script is loaded from anywhere else, and the chat talks to the Assistant service from the user’s browser.

What you’ll create

Definition	Type	What it’s for
ZZ_AI_ASSISTANT_JS	HTML	The chat script, assistant-chat.js from the release
ZZ_AI_ASSISTANT_CSS	Style sheet	The chat’s styles, assistant-chat.css
ZZ_AI_ASSISTANT	URL	The Assistant service’s address
ZZ_AI_ASSISTANT	Page	A Fluid page with an HTML area for the chat
ZZ_AI_ASSISTANT	Component	The Fluid component, with the PeopleCode that starts the chat
ZZ_ASSISTANT	Menu	The menu the component is registered on

Build the component

1. Create the script and style sheet. In Application Designer, create an HTML definition, ZZ_AI_ASSISTANT_JS, and a style sheet, ZZ_AI_ASSISTANT_CSS, with the contents of assistant-chat.js and assistant-chat.css from the Assistant release.

2. Store the service’s address. At PeopleTools > Utilities > Administration > URLs, create the URL definition ZZ_AI_ASSISTANT, with the value https://assistant.example.com. Each environment can then point to its own service, without code changes.

3. Create the page. Create a Fluid page, ZZ_AI_ASSISTANT, with an HTML area whose content is <div id="zz-assistant"></div>. The chat renders itself there.

4. Create the component. Add the page to a new component, ZZ_AI_ASSISTANT. On the Fluid tab of the component properties, select Fluid Mode, and use INSTALLATION as the search record, since the component has no keys.

5. Add the PeopleCode below to the component’s PostBuild event.

ZZ_AI_ASSISTANT.GBL.PostBuild

/* Load the chat's styles and script */
AddStyleSheet(StyleSheet.ZZ_AI_ASSISTANT_CSS);
AddJavaScript(HTML.ZZ_AI_ASSISTANT_JS);

/* Start the chat with the service's address */
Local string &service = GetURL(URL.ZZ_AI_ASSISTANT);
&service = EscapeJavascriptString(&service);
AddOnLoadScript("zzAssistant.start('" | &service | "');");

The PeopleCode passes only the service’s address, which comes from a URL definition that only administrators can change. The context from Magic Buttons, the ASSIST_ parameters, is read by the chat script itself, from the page’s URL. The script treats those values as data, and never inserts them into HTML or script, so a crafted link can’t run code on the page.

Register it and add a tile

1. Register the component. With the component open in Application Designer, choose Register Component to start the registration wizard. Add it to the ZZ_ASSISTANT menu, create its content reference in the Fluid Structure Content folder, and add it to the permission list ZZ_ASSIST_USER.

2. Check the URL. The content reference’s URL, such as https://hr.example.com/psc/ps/EMPLOYEE/HRMS/c/ZZ_ASSISTANT.ZZ_AI_ASSISTANT.GBL, must match the redirect URI you registered in Connect sign-in.

3. Create a tile. At PeopleTools > Portal > Tile Wizard, create a tile for the component, named Assistant, and add it to your homepages and the NavBar, so the Assistant is one click away on every Fluid page.

Allow the page in the service

The chat page calls the Assistant service from the browser, so the service must allow the page’s origin. Check that server.allowed_origins in assistant.yaml lists your PeopleSoft web server, such as https://hr.example.com, as in Run the Assistant service.

If your web server sends a Content Security Policy

Some PeopleSoft web servers send a Content-Security-Policy header. If yours does, add the Assistant service and your identity provider to its connect-src directive, or the browser will block the chat’s requests.

Try it

Sign in to PeopleSoft as a test user with ZZ_ASSIST_USER, open the Assistant tile, and ask “How many vacation hours do I have left?”. The first time, the chat page may ask the user to sign in to the identity provider, or to approve access; after that, it signs in without asking.