Skip to content

Commit b33d379

Browse files
author
I750911
committed
adapted request and response handling to new backend
1 parent 466a882 commit b33d379

File tree

1 file changed

+71
-74
lines changed
  • sample-code/spring-app/src/main/resources/static

1 file changed

+71
-74
lines changed

‎sample-code/spring-app/src/main/resources/static/index.html‎

Lines changed: 71 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,8 @@
109109
overflow-y: auto;
110110
}
111111

112+
113+
112114
</style>
113115
</head>
114116
<body>
@@ -398,6 +400,12 @@ <h5>OpenAI</h5>
398400
</div>
399401

400402
<footer class="footer">
403+
<div class="global-view-toggle">
404+
<div class="btn-group">
405+
<button id="global-json-btn" class="btn btn-sm btn-outline-primary active">JSON</button>
406+
<button id="global-content-btn" class="btn btn-sm btn-outline-primary">Message</button>
407+
</div>
408+
</div>
401409
<div class="footer-links">
402410
<a href="https://github.com/SAP/ai-sdk-java">GitHub</a>
403411
</div>
@@ -436,6 +444,30 @@ <h5>OpenAI</h5>
436444
const modalTitle = modalElement.querySelector('.modal-title');
437445
const modalHeader = modalElement.querySelector('.modal-header');
438446

447+
let ToggleJSON = true; // Default to JSON view
448+
449+
function getCurrentViewPreference() {
450+
return ToggleJSON;
451+
}
452+
453+
document.addEventListener('DOMContentLoaded', () => {
454+
const globalJsonBtn = document.getElementById('global-json-btn');
455+
const globalContentBtn = document.getElementById('global-content-btn');
456+
457+
function toggleView(showJson) {
458+
ToggleJSON = showJson ? true : false;
459+
if (showJson) {
460+
globalJsonBtn.classList.add('active');
461+
globalContentBtn.classList.remove('active');
462+
} else {
463+
globalContentBtn.classList.add('active');
464+
globalJsonBtn.classList.remove('active');
465+
}
466+
}
467+
468+
globalJsonBtn.addEventListener('click', () => toggleView(true));
469+
globalContentBtn.addEventListener('click', () => toggleView(false));
470+
});
439471

440472
document.querySelectorAll('.endpoint').forEach(link => {
441473
link.addEventListener('click', async (event) => {
@@ -447,19 +479,30 @@ <h5>OpenAI</h5>
447479

448480
try {
449481
// Make initial request and check content type
450-
const response = await fetch(endpoint);
451-
if (!response.ok) throw new Error("Error occurred with status code: " + response.status);
482+
483+
let response = null;
484+
if (getCurrentViewPreference) {
485+
const headers = {
486+
'accept': 'application/json'
487+
};
488+
response = await fetch(endpoint, { headers });
489+
}
490+
else {
491+
response = await fetch(endpoint);
492+
}
493+
494+
if (!response.ok) throw new Error("Error occurred!");
452495

453496
const contentType = response.headers.get('content-type');
454497

455498
if (contentType && contentType.includes('text/event-stream')) {
456499
await handleStreamingResponse(response, event.target.innerHTML);
457500
} else {
458501
const data = await response.json();
459-
updateDisplay(data, event.target.innerHTML, endpoint, false);
502+
updateDisplay(data, event.target.innerHTML, endpoint, contentType);
460503
}
461504
} catch (error) {
462-
updateDisplay(error.message, event.target.innerHTML, endpoint, true);
505+
updateDisplay(error.message, event.target.innerHTML, endpoint, 'error');
463506
} finally {
464507
// Hide the spinner
465508
spinner.classList.add("d-none");
@@ -471,10 +514,6 @@ <h5>OpenAI</h5>
471514
try {
472515
// Set the modal title
473516
modalTitle.innerHTML = `<code>${endpointName}</code>`;
474-
const existingToggleGroup = modalHeader.querySelector('.btn-group');
475-
if (existingToggleGroup) {
476-
existingToggleGroup.remove();
477-
}
478517

479518
// Prepare the modal body for streaming content
480519
modalBody.innerHTML = `
@@ -510,7 +549,7 @@ <h5>OpenAI</h5>
510549
throw new Error('Response is not a stream');
511550
}
512551
} catch (error) {
513-
updateDisplay(error.message, endpointName, endpoint, true);
552+
updateDisplay(error.message, endpointName, endpoint, 'error');
514553
}
515554
}
516555

@@ -523,83 +562,41 @@ <h5>OpenAI</h5>
523562
.replace(/'/g, "&#039;");
524563
}
525564

526-
function updateDisplay(data, endpointName, endpoint, error) {
565+
function updateDisplay(data, endpointName, endpoint, contentType) {
527566
// Set the modal title to the endpointName
528567
modalTitle.innerHTML = `<code>${endpointName}</code>`;
529-
const existingToggleGroup = modalHeader.querySelector('.btn-group');
530-
if (existingToggleGroup) {
531-
existingToggleGroup.remove();
532-
}
533-
if(error) {
568+
569+
if(contentType === 'error') {
534570
modalBody.innerHTML = `
535571
<div class="alert alert-danger" role="alert">
536-
${data}. For more information, check the output of <a href="${endpoint}">${endpointName}</a>
572+
${data} For more information, check the output of <a href="${endpoint}">${endpointName}</a>
537573
</div>
538574
`;
539575
modalInstance.show();
540576
return;
541577
}
542578

543-
// Check if the data has a 'content' field
544-
const hasContentField = data.hasOwnProperty('content');
545-
546-
// Create a container for the modal content with toggle functionality
547-
modalBody.innerHTML = `
548-
<div class="json-display-container">
549-
<div id="json-container"></div>
550-
${hasContentField ? `
551-
<div id="content-container" class="d-none p-3 bg-light border rounded mt-3">
552-
<pre class="m-0 text-wrap"></pre>
579+
// Create the content based on the current view preference
580+
if (getCurrentViewPreference()) {
581+
modalBody.innerHTML = '<div id="json-container"></div>';
582+
try {
583+
// Parse the data if it's a string
584+
const jsonData = typeof data === 'string' ? JSON.parse(data) : data;
585+
$('#json-container').JSONView(jsonData);
586+
} catch (e) {
587+
modalBody.innerHTML = `
588+
<div class="alert alert-danger" role="alert">
589+
Error parsing JSON response: ${e.message}
553590
</div>
554-
` : ''}
555-
</div>
556-
`;
557-
558-
// Render full JSON
559-
$('#json-container').JSONView(data);
560-
561-
// If content field exists, set up toggle functionality
562-
if (hasContentField) {
563-
564-
// Create toggle buttons in the modal header
565-
const toggleGroup = document.createElement('div');
566-
toggleGroup.className = 'btn-group ms-auto';
567-
toggleGroup.innerHTML = `
568-
<button id="full-json-btn" class="btn btn-sm btn-outline-primary active">JSON</button>
569-
<button id="content-json-btn" class="btn btn-sm btn-outline-primary">Message</button>
591+
`;
592+
}
593+
} else {
594+
const jsonData = typeof data === 'string' ? data : JSON.stringify(data, null, 4);
595+
modalBody.innerHTML = `
596+
<div id="content-container" class="p-3 bg-light border rounded">
597+
<pre> ${jsonData} </pre>
598+
</div>
570599
`;
571-
572-
// Insert the toggle group before the close button
573-
const closeButton = modalHeader.querySelector('.btn-close');
574-
modalHeader.insertBefore(toggleGroup, closeButton);
575-
576-
const jsonContainer = document.getElementById('json-container');
577-
const contentContainer = document.getElementById('content-container');
578-
const contentPre = contentContainer.querySelector('pre');
579-
580-
// Render content field
581-
contentPre.textContent = typeof data.content === 'object'
582-
? JSON.stringify(data.content, null, 2)
583-
: data.content;
584-
585-
// Get toggle buttons
586-
const fullJsonBtn = document.getElementById('full-json-btn');
587-
const contentJsonBtn = document.getElementById('content-json-btn');
588-
589-
// Toggle functionality
590-
fullJsonBtn.addEventListener('click', () => {
591-
fullJsonBtn.classList.add('active');
592-
contentJsonBtn.classList.remove('active');
593-
jsonContainer.classList.remove('d-none');
594-
contentContainer.classList.add('d-none');
595-
});
596-
597-
contentJsonBtn.addEventListener('click', () => {
598-
contentJsonBtn.classList.add('active');
599-
fullJsonBtn.classList.remove('active');
600-
contentContainer.classList.remove('d-none');
601-
jsonContainer.classList.add('d-none');
602-
});
603600
}
604601

605602
// Show the modal

0 commit comments

Comments
 (0)