Line break in pop-up

[mouradhadj-]

HI,

I'm currently working on integrating a Generative AI (GenAI) use case in my instance where I trigger a Skill using an UI Action, retrieve the output via a Script Include, and display the result in a UI Page pop-up.

 The logic works, and the pop-up shows the content.
 However, the response content appears all clumped together, without respecting \n or intended line breaks, making the output unreadable.

Here’s my setup:

Script Include (called by GlideAjax from the UI Action)

var GenAISkillExecutor = Class.create();
GenAISkillExecutor.prototype = Object.extendsObject(AbstractAjaxProcessor, {
runSimilarIncidentSkill: function () {
var sys_id = this.getParameter('sysparm_sys_id');

var inputsPayload = {
incident: {
tableName: 'incident',
sysId: sys_id,
queryString: ''
}
};

var capabilityId = 'f5faa15d33616e544a35f9023d5c7b53';
var skillConfigId = 'c6faad5533a16e544a35f9023d5c7bd2';

var request = {
executionRequests: [{
payload: inputsPayload,
capabilityId: capabilityId,
meta: {
skillConfigId: skillConfigId
}
}],
mode: 'sync'
};

try {
var response = sn_one_extend.OneExtendUtil.execute(request) || {};
var raw = ((response.capabilities || {})[capabilityId] || {}).response;

var parsed = JSON.parse(raw);
var output = parsed.model_output || raw;
output = output.replace(/\\n/g, '\n'); // Tried to fix newlines

return output;
} catch (e) {
return "Error: " + e.message;
}
}
});

UI Action (Client-Side Script)

function checkSimilarIncidents() {
var sysId = g_form.getUniqueValue();

var ga = new GlideAjax('GenAISkillExecutor');
ga.addParam('sysparm_name', 'runSimilarIncidentSkill');
ga.addParam('sysparm_sys_id', sysId);

ga.getXMLAnswer(function(response) {
if (!response) {
alert("GenAI response is empty.");
return;
}

var dialog = new GlideDialogWindow('check_similar_incidents_ui');
dialog.setTitle("GenAI - Similar Incidents");
dialog.setPreference('output', response);
dialog.render();
});
}

checkSimilarIncidents();


UI Page (Jelly)

<j:jelly xmlns:j="jelly:core" xmlns:g="glide">
<g:ui_form>
<style>
#ai_response {
width: 800px;
height: 500px;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.6;
padding: 20px;
overflow-y: auto;
border-radius: 8px;
border: 1px solid #ccc;
background-color: #fafafa;
white-space: pre-wrap;
}
</style>

<table>
<tr>
<td>
<label><b>GenAI Response:</b></label><br />
<g:evaluate var="jvar_text" expression="RP.getWindowProperties().get('output')" />
<div id="ai_response" contenteditable="true">${jvar_text}</div>
</td>
</tr>

<tr>
<td style="padding-top: 20px;">
<g:dialog_buttons_ok_cancel
ok="return addToWorkNote();"
ok_text="Add to Work Notes"
cancel="return GlideDialogWindow.get().destroy();" />
</td>
</tr>
</table>
</g:ui_form>
</j:jelly>

How can I properly display formatted text (with newlines or Markdown-style headings) in a readable way in the pop-up UI Page? Is there a better way to inject multi-line or HTML-formatted GenAI output into the UI Page dynamically?

Any ideas or best practices would be very welcome!