diff --git a/django_app/frontend/src/js/web-components/chats/chat-history-item.js b/django_app/frontend/src/js/web-components/chats/chat-history-item.js index 9c865ced7..3a313f257 100644 --- a/django_app/frontend/src/js/web-components/chats/chat-history-item.js +++ b/django_app/frontend/src/js/web-components/chats/chat-history-item.js @@ -40,13 +40,7 @@ class ChatHistoryItem extends HTMLElement { this.toggleButton?.setAttribute("aria-expanded", "false"); this.#toggleChatTitleEdit(true); }); - if (this.dataset.iscurrentchat === "true") { - this.querySelector('[data-action="print"]')?.addEventListener("click", () => { - window.print(); - }); - } else { - this.querySelector('[data-action="print"]').style.display = "none"; - } + this.querySelector('[data-action="print"]')?.addEventListener("click", this.#printChat); let deleteButton = /** @type {HTMLButtonElement} */ (this.querySelector('[data-action="delete-confirm"]')); deleteButton.addEventListener("click", async () => { @@ -186,6 +180,22 @@ class ChatHistoryItem extends HTMLElement { } }; + #printChat = () => { + const url = this.querySelector(".rb-chat-history__link").href; + const printFrame = document.createElement("iframe"); + printFrame.addEventListener("load", () => { + const closePrint = () => { + document.body.removeChild(printFrame); + }; + printFrame.contentWindow.addEventListener("beforeunload", closePrint); + printFrame.contentWindow.addEventListener("afterprint", closePrint); + printFrame.contentWindow?.print(); + printFrame.style.display = "none"; + }); + printFrame.src = url; + document.body.appendChild(printFrame); + }; + } customElements.define("chat-history-item", ChatHistoryItem); diff --git a/django_app/frontend/tests-web-components/chat-history.spec.js b/django_app/frontend/tests-web-components/chat-history.spec.js index b9addcb6e..065126299 100644 --- a/django_app/frontend/tests-web-components/chat-history.spec.js +++ b/django_app/frontend/tests-web-components/chat-history.spec.js @@ -36,16 +36,6 @@ test(`Chat history functionality works as expected`, async ({ page }) => { await textInput.press("Enter"); await expect(chatHistoryItem).toContainText("Renamed chat"); - // The print button only displays for the active chat - await page.locator(".rb-chat-history__actions-button").first().click(); - await page.waitForTimeout(500); - await expect(page.locator('button[data-action="print"]').first()).toBeVisible(); - await page.locator(".rb-chat-history__actions-button").first().click(); - await page.locator(".rb-chat-history__actions-button").nth(1).click(); - await page.waitForTimeout(500); - await expect(page.locator('button[data-action="print"]').nth(1)).not.toBeVisible(); - await page.locator(".rb-chat-history__actions-button").nth(1).click(); - // A chat can be deleted await page.locator(".rb-chat-history__actions-button").first().click(); await page.locator('button[data-action="delete"]').first().click(); diff --git a/django_app/redbox_app/settings.py b/django_app/redbox_app/settings.py index 1a5a53811..411ee7ce4 100644 --- a/django_app/redbox_app/settings.py +++ b/django_app/redbox_app/settings.py @@ -197,7 +197,7 @@ "s3.amazonaws.com", ) CSP_STYLE_SRC = ("'self'",) -CSP_FRAME_ANCESTORS = ("'none'",) +CSP_FRAME_ANCESTORS = ("'self'",) # 'self' needed for printing chats CSP_CONNECT_SRC = [