From f1e8acafbaa7e346266fecfeaeb9847eb3c12d10 Mon Sep 17 00:00:00 2001
From: Austin Hulen <austin@thehulens.com>
Date: Mon, 16 Dec 2024 18:38:47 -0800
Subject: [PATCH 1/4] Add PDF export functionality to ChatThread component

---
 src/ui/UserPortal/components/ChatThread.vue |  58 +++++
 src/ui/UserPortal/package-lock.json         | 221 ++++++++++++++++++++
 src/ui/UserPortal/package.json              |   1 +
 3 files changed, 280 insertions(+)

diff --git a/src/ui/UserPortal/components/ChatThread.vue b/src/ui/UserPortal/components/ChatThread.vue
index 97325796f1..1d7ce46b12 100644
--- a/src/ui/UserPortal/components/ChatThread.vue
+++ b/src/ui/UserPortal/components/ChatThread.vue
@@ -1,5 +1,10 @@
 <template>
 	<div class="chat-thread">
+		<button
+			label="Export Chat to PDF"
+			icon="pi pi-file-pdf"
+			@click="exportChatToPDF"
+		/>
 		<!-- Message list -->
 		<div
 			ref="messageContainer"
@@ -69,6 +74,7 @@
 
 <script lang="ts">
 import type { Message, Session } from '@/js/types';
+import jsPDF from "jspdf";
 
 export default {
 	name: 'ChatThread',
@@ -210,6 +216,58 @@ export default {
 
 			// this.isMessagePending = false;
 		},
+
+		async exportChatToPDF() {
+			const doc = new jsPDF({ unit: "mm", format: "a4" });
+			let y = 15;
+
+			doc.setFont("helvetica", "bold");
+			doc.setFontSize(16);
+			doc.text("Chat Conversation", 105, y, { align: "center" });
+			y += 10;
+
+			for (const message of this.messages) {
+				const sender = message.sender === "User" ? "You" : message.senderDisplayName || "Agent";
+				const timestamp = new Date(message.timeStamp).toLocaleString();
+				const textContent = message.text || message.content?.map(c => c.value).join("\n") || "[No content]";
+
+				doc.setFont("helvetica", "bold");
+				doc.setFontSize(12);
+				doc.setTextColor(30, 30, 30);
+				doc.text(`${timestamp} - ${sender}:`, 10, y);
+				y += 6;
+
+				doc.setFont("helvetica", "normal");
+				doc.setFontSize(10);
+				doc.setTextColor(0, 0, 0);
+
+				const wrappedText = doc.splitTextToSize(textContent, 180);
+				for (let line of wrappedText) {
+					doc.text(line, 10, y);
+					y += 5;
+					if (y > 270) {
+						doc.addPage();
+						y = 15;
+					}
+				}
+
+				y += 4;
+
+				if (y > 270) {
+					doc.addPage();
+					y = 15;
+				}
+			}
+
+			const pageCount = doc.internal.getNumberOfPages();
+			for (let i = 1; i <= pageCount; i++) {
+				doc.setPage(i);
+				doc.setFontSize(8);
+				doc.text(`Page ${i} of ${pageCount}`, 105, 285, { align: "center" });
+			}
+
+			doc.save("Improved_Chat_Conversation.pdf");
+		}
 	},
 };
 </script>
diff --git a/src/ui/UserPortal/package-lock.json b/src/ui/UserPortal/package-lock.json
index a94d1b4ec9..b703bd8d4d 100644
--- a/src/ui/UserPortal/package-lock.json
+++ b/src/ui/UserPortal/package-lock.json
@@ -15,6 +15,7 @@
 				"floating-vue": "^2.0.0",
 				"highlight.js": "^11.10.0",
 				"javascript-time-ago": "^2.5.9",
+				"jspdf": "^2.5.2",
 				"katex": "^0.16.11",
 				"marked": "^14.1.0",
 				"marked-highlight": "^2.1.3",
@@ -713,6 +714,18 @@
 				"@babel/core": "^7.0.0-0"
 			}
 		},
+		"node_modules/@babel/runtime": {
+			"version": "7.26.0",
+			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+			"integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
+			"license": "MIT",
+			"dependencies": {
+				"regenerator-runtime": "^0.14.0"
+			},
+			"engines": {
+				"node": ">=6.9.0"
+			}
+		},
 		"node_modules/@babel/standalone": {
 			"version": "7.25.5",
 			"resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.25.5.tgz",
@@ -3603,6 +3616,13 @@
 			"integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
 			"dev": true
 		},
+		"node_modules/@types/raf": {
+			"version": "3.4.3",
+			"resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+			"integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+			"license": "MIT",
+			"optional": true
+		},
 		"node_modules/@types/resolve": {
 			"version": "1.20.2",
 			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -4966,6 +4986,18 @@
 			"integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==",
 			"dev": true
 		},
+		"node_modules/atob": {
+			"version": "2.1.2",
+			"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+			"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+			"license": "(MIT OR Apache-2.0)",
+			"bin": {
+				"atob": "bin/atob.js"
+			},
+			"engines": {
+				"node": ">= 4.5.0"
+			}
+		},
 		"node_modules/autoprefixer": {
 			"version": "10.4.20",
 			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -5037,6 +5069,16 @@
 			"dev": true,
 			"optional": true
 		},
+		"node_modules/base64-arraybuffer": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+			"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+			"license": "MIT",
+			"optional": true,
+			"engines": {
+				"node": ">= 0.6.0"
+			}
+		},
 		"node_modules/base64-js": {
 			"version": "1.5.1",
 			"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -5142,6 +5184,18 @@
 				"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
 			}
 		},
+		"node_modules/btoa": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+			"integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+			"license": "(MIT OR Apache-2.0)",
+			"bin": {
+				"btoa": "bin/btoa.js"
+			},
+			"engines": {
+				"node": ">= 0.4.0"
+			}
+		},
 		"node_modules/buffer": {
 			"version": "6.0.3",
 			"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
@@ -5324,6 +5378,33 @@
 				}
 			]
 		},
+		"node_modules/canvg": {
+			"version": "3.0.10",
+			"resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
+			"integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@babel/runtime": "^7.12.5",
+				"@types/raf": "^3.4.0",
+				"core-js": "^3.8.3",
+				"raf": "^3.4.1",
+				"regenerator-runtime": "^0.13.7",
+				"rgbcolor": "^1.0.1",
+				"stackblur-canvas": "^2.0.0",
+				"svg-pathdata": "^6.0.3"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			}
+		},
+		"node_modules/canvg/node_modules/regenerator-runtime": {
+			"version": "0.13.11",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+			"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+			"license": "MIT",
+			"optional": true
+		},
 		"node_modules/chalk": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -5714,6 +5795,18 @@
 				"url": "https://github.com/sponsors/mesqueeb"
 			}
 		},
+		"node_modules/core-js": {
+			"version": "3.39.0",
+			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.39.0.tgz",
+			"integrity": "sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==",
+			"hasInstallScript": true,
+			"license": "MIT",
+			"optional": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/core-js"
+			}
+		},
 		"node_modules/core-js-compat": {
 			"version": "3.38.1",
 			"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.1.tgz",
@@ -5843,6 +5936,16 @@
 				"postcss": "^8.0.9"
 			}
 		},
+		"node_modules/css-line-break": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+			"integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"utrie": "^1.0.2"
+			}
+		},
 		"node_modules/css-select": {
 			"version": "5.1.0",
 			"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
@@ -7768,6 +7871,12 @@
 				"reusify": "^1.0.4"
 			}
 		},
+		"node_modules/fflate": {
+			"version": "0.8.2",
+			"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+			"integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+			"license": "MIT"
+		},
 		"node_modules/file-entry-cache": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -8468,6 +8577,20 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/html2canvas": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+			"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"css-line-break": "^2.1.0",
+				"text-segmentation": "^1.0.3"
+			},
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
 		"node_modules/htmlparser2": {
 			"version": "8.0.2",
 			"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
@@ -9307,6 +9430,31 @@
 				"graceful-fs": "^4.1.6"
 			}
 		},
+		"node_modules/jspdf": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.2.tgz",
+			"integrity": "sha512-myeX9c+p7znDWPk0eTrujCzNjT+CXdXyk7YmJq5nD5V7uLLKmSXnlQ/Jn/kuo3X09Op70Apm0rQSnFWyGK8uEQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@babel/runtime": "^7.23.2",
+				"atob": "^2.1.2",
+				"btoa": "^1.2.1",
+				"fflate": "^0.8.1"
+			},
+			"optionalDependencies": {
+				"canvg": "^3.0.6",
+				"core-js": "^3.6.0",
+				"dompurify": "^2.5.4",
+				"html2canvas": "^1.0.0-rc.5"
+			}
+		},
+		"node_modules/jspdf/node_modules/dompurify": {
+			"version": "2.5.8",
+			"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.8.tgz",
+			"integrity": "sha512-o1vSNgrmYMQObbSSvF/1brBYEQPHhV1+gsmrusO7/GXtp1T9rCS8cXFqVxK/9crT1jA6Ccv+5MTSjBNqr7Sovw==",
+			"license": "(MPL-2.0 OR Apache-2.0)",
+			"optional": true
+		},
 		"node_modules/katex": {
 			"version": "0.16.11",
 			"resolved": "https://registry.npmjs.org/katex/-/katex-0.16.11.tgz",
@@ -11217,6 +11365,13 @@
 			"resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
 			"integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="
 		},
+		"node_modules/performance-now": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+			"integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+			"license": "MIT",
+			"optional": true
+		},
 		"node_modules/picocolors": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
@@ -11903,6 +12058,16 @@
 			"integrity": "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==",
 			"dev": true
 		},
+		"node_modules/raf": {
+			"version": "3.4.1",
+			"resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+			"integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"performance-now": "^2.1.0"
+			}
+		},
 		"node_modules/randombytes": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -12113,6 +12278,12 @@
 				"node": "^12.0.0 || ^14.0.0 || >=16.0.0"
 			}
 		},
+		"node_modules/regenerator-runtime": {
+			"version": "0.14.1",
+			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+			"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+			"license": "MIT"
+		},
 		"node_modules/regexp-ast-analysis": {
 			"version": "0.7.1",
 			"resolved": "https://registry.npmjs.org/regexp-ast-analysis/-/regexp-ast-analysis-0.7.1.tgz",
@@ -12259,6 +12430,16 @@
 			"integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
 			"dev": true
 		},
+		"node_modules/rgbcolor": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+			"integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+			"license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+			"optional": true,
+			"engines": {
+				"node": ">= 0.8.15"
+			}
+		},
 		"node_modules/rimraf": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -12904,6 +13085,16 @@
 			"integrity": "sha512-LjdcbuBeLcdETCrPn9i8AYAZ1eCtu4ECAWtP7UleOiZ9LzVxRzzUZEoZ8zB24nhkQnDWyET0I+3sWokSDS3E7g==",
 			"dev": true
 		},
+		"node_modules/stackblur-canvas": {
+			"version": "2.7.0",
+			"resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+			"integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+			"license": "MIT",
+			"optional": true,
+			"engines": {
+				"node": ">=0.1.14"
+			}
+		},
 		"node_modules/standard-as-callback": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/standard-as-callback/-/standard-as-callback-2.1.0.tgz",
@@ -13162,6 +13353,16 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/svg-pathdata": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+			"integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+			"license": "MIT",
+			"optional": true,
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
 		"node_modules/svg-tags": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -13389,6 +13590,16 @@
 				"b4a": "^1.6.4"
 			}
 		},
+		"node_modules/text-segmentation": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+			"integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"utrie": "^1.0.2"
+			}
+		},
 		"node_modules/text-table": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -14033,6 +14244,16 @@
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 			"dev": true
 		},
+		"node_modules/utrie": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+			"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"base64-arraybuffer": "^1.0.2"
+			}
+		},
 		"node_modules/validate-npm-package-license": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
diff --git a/src/ui/UserPortal/package.json b/src/ui/UserPortal/package.json
index 87ce072e43..b7a953a48b 100644
--- a/src/ui/UserPortal/package.json
+++ b/src/ui/UserPortal/package.json
@@ -36,6 +36,7 @@
 		"floating-vue": "^2.0.0",
 		"highlight.js": "^11.10.0",
 		"javascript-time-ago": "^2.5.9",
+		"jspdf": "^2.5.2",
 		"katex": "^0.16.11",
 		"marked": "^14.1.0",
 		"marked-highlight": "^2.1.3",

From bb3ff7c594721314aba49bad3a706c0cec358fca Mon Sep 17 00:00:00 2001
From: Austin Hulen <austin@thehulens.com>
Date: Wed, 18 Dec 2024 14:42:14 -0800
Subject: [PATCH 2/4] Enhance PDF export functionality in ChatThread component
 with improved layout and styling

---
 src/ui/UserPortal/components/ChatThread.vue | 135 ++++++++++++++++----
 1 file changed, 107 insertions(+), 28 deletions(-)

diff --git a/src/ui/UserPortal/components/ChatThread.vue b/src/ui/UserPortal/components/ChatThread.vue
index 1d7ce46b12..3491b8476d 100644
--- a/src/ui/UserPortal/components/ChatThread.vue
+++ b/src/ui/UserPortal/components/ChatThread.vue
@@ -218,55 +218,134 @@ export default {
 		},
 
 		async exportChatToPDF() {
+		// 	const doc = new jsPDF({ unit: "mm", format: "a4" });
+		// 	let y = 15;
+
+		// 	const pageHeight = 297;
+		// 	const margin = 10;
+		// 	const maxWidth = 130;
+		// 	const userBgColor = [173, 216, 230];
+		// 	const agentBgColor = [230, 230, 230];
+
+		// 	doc.setFont("helvetica", "bold");
+		// 	doc.setFontSize(16);
+		// 	doc.text("Chat Conversation", 105, y, { align: "center" });
+		// 	y += 10;
+
+		// 	for (const message of this.messages) {
+		// 		const isUser = message.sender === "User";
+		// 		const sender = isUser ? "You" : message.senderDisplayName || "Agent";
+		// 		const timestamp = new Date(message.timeStamp).toLocaleString();
+		// 		const textContent = message.text || message.content?.map(c => c.value).join("\n") || "[No content]";
+		// 		const wrappedText = doc.splitTextToSize(textContent, maxWidth);
+
+		// 		const boxX = isUser ? 210 - maxWidth - margin : margin;
+		// 		const boxWidth = maxWidth + 5;
+		// 		const boxHeight = wrappedText.length * 5 + 8;
+
+		// 		if (y > pageHeight - margin) {
+		// 			doc.addPage();
+		// 			y = margin;
+		// 		}
+
+		// 		doc.setFontSize(8);
+		// 		doc.setTextColor(100, 100, 100);
+		// 		doc.text(`${timestamp} - ${sender}`, isUser ? 210 - margin : margin, y);
+
+		// 		y += 4;
+
+		// 		doc.setFillColor(...(isUser ? userBgColor : agentBgColor));
+        //     	doc.roundedRect(boxX, y, boxWidth, boxHeight, 2, 2, "F");
+
+		// 		doc.setFontSize(10);
+		// 		doc.setTextColor(0, 0, 0);
+		// 		wrappedText.forEach((line, index) => {
+		// 			doc.text(line, boxX + 3, y + 7 + index * 5);
+		// 		});
+
+		// 		y += boxHeight + 5;
+		// 	}
+
+		// 	const pageCount = doc.internal.getNumberOfPages();
+		// 	for (let i = 1; i <= pageCount; i++) {
+		// 		doc.setPage(i);
+		// 		doc.setFontSize(8);
+		// 		doc.text(`Page ${i} of ${pageCount}`, 105, 290, { align: "center" });
+		// 	}
+
+		// 	doc.save("Improved_Chat_Conversation.pdf");
+		// }
+			console.log(this.$appConfigStore.primaryColor);
+
 			const doc = new jsPDF({ unit: "mm", format: "a4" });
-			let y = 15;
+			const pageHeight = 297; // A4 height in mm
+			const margin = 10; // Page margins
+			const messageMargin = 6; // Message bubble padding
+			let y = 15; // Start vertical position
+
+			const maxWidth = 160;
+			const userBgColor = '#FFFFFF'; // Background color for user messages
+			const userTextColor = '#000000'; // Text color for user messages
+			const agentBgColor = this.$appConfigStore.primaryColor; // Background color for agent messages
+			const agentTextColor = this.$appConfigStore.primaryText; // Text colors for agent messages
+
+			doc.setFont("helvetica");
 
-			doc.setFont("helvetica", "bold");
+			// Title
 			doc.setFontSize(16);
 			doc.text("Chat Conversation", 105, y, { align: "center" });
 			y += 10;
 
+			// Process messages
 			for (const message of this.messages) {
-				const sender = message.sender === "User" ? "You" : message.senderDisplayName || "Agent";
+				const isUser = message.sender === "User";
+				const sender = isUser ? "You" : message.senderDisplayName || "Agent";
 				const timestamp = new Date(message.timeStamp).toLocaleString();
 				const textContent = message.text || message.content?.map(c => c.value).join("\n") || "[No content]";
+				const wrappedText = doc.splitTextToSize(textContent, maxWidth);
 
-				doc.setFont("helvetica", "bold");
-				doc.setFontSize(12);
-				doc.setTextColor(30, 30, 30);
-				doc.text(`${timestamp} - ${sender}:`, 10, y);
-				y += 6;
+				// Dynamic height calculation
+				const boxHeight = (wrappedText.length * 5) + (messageMargin); // Text height + padding + margin
 
-				doc.setFont("helvetica", "normal");
-				doc.setFontSize(10);
-				doc.setTextColor(0, 0, 0);
-
-				const wrappedText = doc.splitTextToSize(textContent, 180);
-				for (let line of wrappedText) {
-					doc.text(line, 10, y);
-					y += 5;
-					if (y > 270) {
-						doc.addPage();
-						y = 15;
-					}
+				// Handle page overflow before drawing
+				if (y + boxHeight + 10 > pageHeight - margin) {
+					doc.addPage();
+					y = margin;
 				}
 
+				// Timestamp
+				doc.setFontSize(8);
+				doc.setTextColor(100, 100, 100);
+				const textWidth = doc.getTextWidth(`${timestamp} - ${sender}`);
+				const adjustedX = isUser ? 210 - margin - textWidth : margin;
+				doc.text(`${timestamp} - ${sender}`, adjustedX, y);
 				y += 4;
 
-				if (y > 270) {
-					doc.addPage();
-					y = 15;
-				}
+				// Message bubble
+				const bubbleX = isUser ? 210 - maxWidth - (messageMargin * 2) - margin : margin; // Right or left alignment
+				doc.setFillColor(isUser ? userBgColor : agentBgColor);
+				doc.rect(bubbleX, y, maxWidth + (messageMargin * 2), boxHeight, "F");
+
+				// Message text
+				doc.setFontSize(10);
+				doc.setTextColor(isUser ? userTextColor : agentTextColor);
+				wrappedText.forEach((line, index) => {
+					doc.text(line, bubbleX + messageMargin, y + messageMargin + index * 5);
+				});
+
+				y += boxHeight + 5; // Move to the next position
 			}
 
-			const pageCount = doc.internal.getNumberOfPages();
-			for (let i = 1; i <= pageCount; i++) {
+			// Page numbers
+			const totalPages = doc.internal.getNumberOfPages();
+			for (let i = 1; i <= totalPages; i++) {
 				doc.setPage(i);
 				doc.setFontSize(8);
-				doc.text(`Page ${i} of ${pageCount}`, 105, 285, { align: "center" });
+				doc.text(`Page ${i} of ${totalPages}`, 105, 290, { align: "center" });
 			}
 
-			doc.save("Improved_Chat_Conversation.pdf");
+			// Save PDF
+			doc.save("Chat_Conversation_Improved.pdf");
 		}
 	},
 };

From 1aab2f0ce1e6b0446dd3dc17e8ed445e300074f3 Mon Sep 17 00:00:00 2001
From: Austin Hulen <austin@thehulens.com>
Date: Wed, 18 Dec 2024 15:33:12 -0800
Subject: [PATCH 3/4] Refactor message styling in UserPortal to improve text
 wrapping and remove unnecessary page break properties when printing

---
 src/ui/UserPortal/app.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/ui/UserPortal/app.vue b/src/ui/UserPortal/app.vue
index ea238b3b05..0b132a3aec 100644
--- a/src/ui/UserPortal/app.vue
+++ b/src/ui/UserPortal/app.vue
@@ -158,11 +158,16 @@ main {
 		display: none !important;
 	}
 
-	.message-row, .message__body {
-		page-break-inside: avoid;
-		page-break-after: auto;
+	.message-row {
+		// page-break-inside: avoid;
+		// page-break-after: auto;
 		margin-bottom: 1rem;
 	}
+
+	.message__body {
+		overflow-wrap: break-word !important;
+        word-break: break-word !important;
+	}
 }
 
 </style>

From 17406dd4f5aaad278d0353952c1d9cf649acbe18 Mon Sep 17 00:00:00 2001
From: Austin Hulen <ahulen@kmjwebdesign.com>
Date: Fri, 3 Jan 2025 12:44:26 -0500
Subject: [PATCH 4/4] Add print button to NavBar and remove PDF export
 functionality from ChatThread

---
 src/ui/UserPortal/components/ChatThread.vue | 137 ------------
 src/ui/UserPortal/components/NavBar.vue     |  26 +++
 src/ui/UserPortal/package-lock.json         | 221 --------------------
 src/ui/UserPortal/package.json              |   1 -
 4 files changed, 26 insertions(+), 359 deletions(-)

diff --git a/src/ui/UserPortal/components/ChatThread.vue b/src/ui/UserPortal/components/ChatThread.vue
index 3491b8476d..97325796f1 100644
--- a/src/ui/UserPortal/components/ChatThread.vue
+++ b/src/ui/UserPortal/components/ChatThread.vue
@@ -1,10 +1,5 @@
 <template>
 	<div class="chat-thread">
-		<button
-			label="Export Chat to PDF"
-			icon="pi pi-file-pdf"
-			@click="exportChatToPDF"
-		/>
 		<!-- Message list -->
 		<div
 			ref="messageContainer"
@@ -74,7 +69,6 @@
 
 <script lang="ts">
 import type { Message, Session } from '@/js/types';
-import jsPDF from "jspdf";
 
 export default {
 	name: 'ChatThread',
@@ -216,137 +210,6 @@ export default {
 
 			// this.isMessagePending = false;
 		},
-
-		async exportChatToPDF() {
-		// 	const doc = new jsPDF({ unit: "mm", format: "a4" });
-		// 	let y = 15;
-
-		// 	const pageHeight = 297;
-		// 	const margin = 10;
-		// 	const maxWidth = 130;
-		// 	const userBgColor = [173, 216, 230];
-		// 	const agentBgColor = [230, 230, 230];
-
-		// 	doc.setFont("helvetica", "bold");
-		// 	doc.setFontSize(16);
-		// 	doc.text("Chat Conversation", 105, y, { align: "center" });
-		// 	y += 10;
-
-		// 	for (const message of this.messages) {
-		// 		const isUser = message.sender === "User";
-		// 		const sender = isUser ? "You" : message.senderDisplayName || "Agent";
-		// 		const timestamp = new Date(message.timeStamp).toLocaleString();
-		// 		const textContent = message.text || message.content?.map(c => c.value).join("\n") || "[No content]";
-		// 		const wrappedText = doc.splitTextToSize(textContent, maxWidth);
-
-		// 		const boxX = isUser ? 210 - maxWidth - margin : margin;
-		// 		const boxWidth = maxWidth + 5;
-		// 		const boxHeight = wrappedText.length * 5 + 8;
-
-		// 		if (y > pageHeight - margin) {
-		// 			doc.addPage();
-		// 			y = margin;
-		// 		}
-
-		// 		doc.setFontSize(8);
-		// 		doc.setTextColor(100, 100, 100);
-		// 		doc.text(`${timestamp} - ${sender}`, isUser ? 210 - margin : margin, y);
-
-		// 		y += 4;
-
-		// 		doc.setFillColor(...(isUser ? userBgColor : agentBgColor));
-        //     	doc.roundedRect(boxX, y, boxWidth, boxHeight, 2, 2, "F");
-
-		// 		doc.setFontSize(10);
-		// 		doc.setTextColor(0, 0, 0);
-		// 		wrappedText.forEach((line, index) => {
-		// 			doc.text(line, boxX + 3, y + 7 + index * 5);
-		// 		});
-
-		// 		y += boxHeight + 5;
-		// 	}
-
-		// 	const pageCount = doc.internal.getNumberOfPages();
-		// 	for (let i = 1; i <= pageCount; i++) {
-		// 		doc.setPage(i);
-		// 		doc.setFontSize(8);
-		// 		doc.text(`Page ${i} of ${pageCount}`, 105, 290, { align: "center" });
-		// 	}
-
-		// 	doc.save("Improved_Chat_Conversation.pdf");
-		// }
-			console.log(this.$appConfigStore.primaryColor);
-
-			const doc = new jsPDF({ unit: "mm", format: "a4" });
-			const pageHeight = 297; // A4 height in mm
-			const margin = 10; // Page margins
-			const messageMargin = 6; // Message bubble padding
-			let y = 15; // Start vertical position
-
-			const maxWidth = 160;
-			const userBgColor = '#FFFFFF'; // Background color for user messages
-			const userTextColor = '#000000'; // Text color for user messages
-			const agentBgColor = this.$appConfigStore.primaryColor; // Background color for agent messages
-			const agentTextColor = this.$appConfigStore.primaryText; // Text colors for agent messages
-
-			doc.setFont("helvetica");
-
-			// Title
-			doc.setFontSize(16);
-			doc.text("Chat Conversation", 105, y, { align: "center" });
-			y += 10;
-
-			// Process messages
-			for (const message of this.messages) {
-				const isUser = message.sender === "User";
-				const sender = isUser ? "You" : message.senderDisplayName || "Agent";
-				const timestamp = new Date(message.timeStamp).toLocaleString();
-				const textContent = message.text || message.content?.map(c => c.value).join("\n") || "[No content]";
-				const wrappedText = doc.splitTextToSize(textContent, maxWidth);
-
-				// Dynamic height calculation
-				const boxHeight = (wrappedText.length * 5) + (messageMargin); // Text height + padding + margin
-
-				// Handle page overflow before drawing
-				if (y + boxHeight + 10 > pageHeight - margin) {
-					doc.addPage();
-					y = margin;
-				}
-
-				// Timestamp
-				doc.setFontSize(8);
-				doc.setTextColor(100, 100, 100);
-				const textWidth = doc.getTextWidth(`${timestamp} - ${sender}`);
-				const adjustedX = isUser ? 210 - margin - textWidth : margin;
-				doc.text(`${timestamp} - ${sender}`, adjustedX, y);
-				y += 4;
-
-				// Message bubble
-				const bubbleX = isUser ? 210 - maxWidth - (messageMargin * 2) - margin : margin; // Right or left alignment
-				doc.setFillColor(isUser ? userBgColor : agentBgColor);
-				doc.rect(bubbleX, y, maxWidth + (messageMargin * 2), boxHeight, "F");
-
-				// Message text
-				doc.setFontSize(10);
-				doc.setTextColor(isUser ? userTextColor : agentTextColor);
-				wrappedText.forEach((line, index) => {
-					doc.text(line, bubbleX + messageMargin, y + messageMargin + index * 5);
-				});
-
-				y += boxHeight + 5; // Move to the next position
-			}
-
-			// Page numbers
-			const totalPages = doc.internal.getNumberOfPages();
-			for (let i = 1; i <= totalPages; i++) {
-				doc.setPage(i);
-				doc.setFontSize(8);
-				doc.text(`Page ${i} of ${totalPages}`, 105, 290, { align: "center" });
-			}
-
-			// Save PDF
-			doc.save("Chat_Conversation_Improved.pdf");
-		}
 	},
 };
 </script>
diff --git a/src/ui/UserPortal/components/NavBar.vue b/src/ui/UserPortal/components/NavBar.vue
index 71bd9f40f6..a13dd2f090 100644
--- a/src/ui/UserPortal/components/NavBar.vue
+++ b/src/ui/UserPortal/components/NavBar.vue
@@ -83,6 +83,12 @@
 								aria-activedescendant="selected-agent-{{ agentSelection?.label }}"
 								@change="handleAgentChange"
 							/>
+							<Button
+								class="print-button"
+								@click="handlePrint"
+								aria-label="Print"
+								icon="pi pi-print"
+							/>
 						</span>
 					</template>
 				</div>
@@ -250,6 +256,10 @@ export default {
 			await this.$authStore.logout();
 		},
 
+		handlePrint() {
+			window.print();
+		},
+
 		// handleCopySession() {
 		// 	const chatLink = `${window.location.origin}?chat=${this.currentSession!.id}`;
 		// 	navigator.clipboard.writeText(chatLink);
@@ -365,6 +375,10 @@ export default {
 	box-shadow: 0 0 0 0.1rem #fff;
 }
 
+.print-button {
+	margin-left: 8px;
+}
+
 .no-agents {
 	position: fixed;
 	top: 60px;
@@ -412,6 +426,18 @@ export default {
 	}
 }
 
+@media only screen and (max-width: 500px) {
+	.dropdown--agent {
+		max-width: 200px;
+	}
+}
+
+@media only screen and (max-width: 450px) {
+	.dropdown--agent {
+		max-width: 160px;
+	}
+}
+
 .p-dropdown-items-wrapper {
 	max-height: 300px !important;
 }
diff --git a/src/ui/UserPortal/package-lock.json b/src/ui/UserPortal/package-lock.json
index b703bd8d4d..a94d1b4ec9 100644
--- a/src/ui/UserPortal/package-lock.json
+++ b/src/ui/UserPortal/package-lock.json
@@ -15,7 +15,6 @@
 				"floating-vue": "^2.0.0",
 				"highlight.js": "^11.10.0",
 				"javascript-time-ago": "^2.5.9",
-				"jspdf": "^2.5.2",
 				"katex": "^0.16.11",
 				"marked": "^14.1.0",
 				"marked-highlight": "^2.1.3",
@@ -714,18 +713,6 @@
 				"@babel/core": "^7.0.0-0"
 			}
 		},
-		"node_modules/@babel/runtime": {
-			"version": "7.26.0",
-			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
-			"integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
-			"license": "MIT",
-			"dependencies": {
-				"regenerator-runtime": "^0.14.0"
-			},
-			"engines": {
-				"node": ">=6.9.0"
-			}
-		},
 		"node_modules/@babel/standalone": {
 			"version": "7.25.5",
 			"resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.25.5.tgz",
@@ -3616,13 +3603,6 @@
 			"integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
 			"dev": true
 		},
-		"node_modules/@types/raf": {
-			"version": "3.4.3",
-			"resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
-			"integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
-			"license": "MIT",
-			"optional": true
-		},
 		"node_modules/@types/resolve": {
 			"version": "1.20.2",
 			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -4986,18 +4966,6 @@
 			"integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==",
 			"dev": true
 		},
-		"node_modules/atob": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-			"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-			"license": "(MIT OR Apache-2.0)",
-			"bin": {
-				"atob": "bin/atob.js"
-			},
-			"engines": {
-				"node": ">= 4.5.0"
-			}
-		},
 		"node_modules/autoprefixer": {
 			"version": "10.4.20",
 			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -5069,16 +5037,6 @@
 			"dev": true,
 			"optional": true
 		},
-		"node_modules/base64-arraybuffer": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
-			"integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
-			"license": "MIT",
-			"optional": true,
-			"engines": {
-				"node": ">= 0.6.0"
-			}
-		},
 		"node_modules/base64-js": {
 			"version": "1.5.1",
 			"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -5184,18 +5142,6 @@
 				"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
 			}
 		},
-		"node_modules/btoa": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
-			"integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
-			"license": "(MIT OR Apache-2.0)",
-			"bin": {
-				"btoa": "bin/btoa.js"
-			},
-			"engines": {
-				"node": ">= 0.4.0"
-			}
-		},
 		"node_modules/buffer": {
 			"version": "6.0.3",
 			"resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
@@ -5378,33 +5324,6 @@
 				}
 			]
 		},
-		"node_modules/canvg": {
-			"version": "3.0.10",
-			"resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
-			"integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==",
-			"license": "MIT",
-			"optional": true,
-			"dependencies": {
-				"@babel/runtime": "^7.12.5",
-				"@types/raf": "^3.4.0",
-				"core-js": "^3.8.3",
-				"raf": "^3.4.1",
-				"regenerator-runtime": "^0.13.7",
-				"rgbcolor": "^1.0.1",
-				"stackblur-canvas": "^2.0.0",
-				"svg-pathdata": "^6.0.3"
-			},
-			"engines": {
-				"node": ">=10.0.0"
-			}
-		},
-		"node_modules/canvg/node_modules/regenerator-runtime": {
-			"version": "0.13.11",
-			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-			"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-			"license": "MIT",
-			"optional": true
-		},
 		"node_modules/chalk": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -5795,18 +5714,6 @@
 				"url": "https://github.com/sponsors/mesqueeb"
 			}
 		},
-		"node_modules/core-js": {
-			"version": "3.39.0",
-			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.39.0.tgz",
-			"integrity": "sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==",
-			"hasInstallScript": true,
-			"license": "MIT",
-			"optional": true,
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/core-js"
-			}
-		},
 		"node_modules/core-js-compat": {
 			"version": "3.38.1",
 			"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.1.tgz",
@@ -5936,16 +5843,6 @@
 				"postcss": "^8.0.9"
 			}
 		},
-		"node_modules/css-line-break": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
-			"integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
-			"license": "MIT",
-			"optional": true,
-			"dependencies": {
-				"utrie": "^1.0.2"
-			}
-		},
 		"node_modules/css-select": {
 			"version": "5.1.0",
 			"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
@@ -7871,12 +7768,6 @@
 				"reusify": "^1.0.4"
 			}
 		},
-		"node_modules/fflate": {
-			"version": "0.8.2",
-			"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
-			"integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
-			"license": "MIT"
-		},
 		"node_modules/file-entry-cache": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -8577,20 +8468,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/html2canvas": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
-			"integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
-			"license": "MIT",
-			"optional": true,
-			"dependencies": {
-				"css-line-break": "^2.1.0",
-				"text-segmentation": "^1.0.3"
-			},
-			"engines": {
-				"node": ">=8.0.0"
-			}
-		},
 		"node_modules/htmlparser2": {
 			"version": "8.0.2",
 			"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
@@ -9430,31 +9307,6 @@
 				"graceful-fs": "^4.1.6"
 			}
 		},
-		"node_modules/jspdf": {
-			"version": "2.5.2",
-			"resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.2.tgz",
-			"integrity": "sha512-myeX9c+p7znDWPk0eTrujCzNjT+CXdXyk7YmJq5nD5V7uLLKmSXnlQ/Jn/kuo3X09Op70Apm0rQSnFWyGK8uEQ==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/runtime": "^7.23.2",
-				"atob": "^2.1.2",
-				"btoa": "^1.2.1",
-				"fflate": "^0.8.1"
-			},
-			"optionalDependencies": {
-				"canvg": "^3.0.6",
-				"core-js": "^3.6.0",
-				"dompurify": "^2.5.4",
-				"html2canvas": "^1.0.0-rc.5"
-			}
-		},
-		"node_modules/jspdf/node_modules/dompurify": {
-			"version": "2.5.8",
-			"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.8.tgz",
-			"integrity": "sha512-o1vSNgrmYMQObbSSvF/1brBYEQPHhV1+gsmrusO7/GXtp1T9rCS8cXFqVxK/9crT1jA6Ccv+5MTSjBNqr7Sovw==",
-			"license": "(MPL-2.0 OR Apache-2.0)",
-			"optional": true
-		},
 		"node_modules/katex": {
 			"version": "0.16.11",
 			"resolved": "https://registry.npmjs.org/katex/-/katex-0.16.11.tgz",
@@ -11365,13 +11217,6 @@
 			"resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
 			"integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="
 		},
-		"node_modules/performance-now": {
-			"version": "2.1.0",
-			"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-			"integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
-			"license": "MIT",
-			"optional": true
-		},
 		"node_modules/picocolors": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
@@ -12058,16 +11903,6 @@
 			"integrity": "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==",
 			"dev": true
 		},
-		"node_modules/raf": {
-			"version": "3.4.1",
-			"resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
-			"integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
-			"license": "MIT",
-			"optional": true,
-			"dependencies": {
-				"performance-now": "^2.1.0"
-			}
-		},
 		"node_modules/randombytes": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -12278,12 +12113,6 @@
 				"node": "^12.0.0 || ^14.0.0 || >=16.0.0"
 			}
 		},
-		"node_modules/regenerator-runtime": {
-			"version": "0.14.1",
-			"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-			"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-			"license": "MIT"
-		},
 		"node_modules/regexp-ast-analysis": {
 			"version": "0.7.1",
 			"resolved": "https://registry.npmjs.org/regexp-ast-analysis/-/regexp-ast-analysis-0.7.1.tgz",
@@ -12430,16 +12259,6 @@
 			"integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
 			"dev": true
 		},
-		"node_modules/rgbcolor": {
-			"version": "1.0.1",
-			"resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
-			"integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
-			"license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
-			"optional": true,
-			"engines": {
-				"node": ">= 0.8.15"
-			}
-		},
 		"node_modules/rimraf": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -13085,16 +12904,6 @@
 			"integrity": "sha512-LjdcbuBeLcdETCrPn9i8AYAZ1eCtu4ECAWtP7UleOiZ9LzVxRzzUZEoZ8zB24nhkQnDWyET0I+3sWokSDS3E7g==",
 			"dev": true
 		},
-		"node_modules/stackblur-canvas": {
-			"version": "2.7.0",
-			"resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
-			"integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
-			"license": "MIT",
-			"optional": true,
-			"engines": {
-				"node": ">=0.1.14"
-			}
-		},
 		"node_modules/standard-as-callback": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/standard-as-callback/-/standard-as-callback-2.1.0.tgz",
@@ -13353,16 +13162,6 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"node_modules/svg-pathdata": {
-			"version": "6.0.3",
-			"resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
-			"integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
-			"license": "MIT",
-			"optional": true,
-			"engines": {
-				"node": ">=12.0.0"
-			}
-		},
 		"node_modules/svg-tags": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -13590,16 +13389,6 @@
 				"b4a": "^1.6.4"
 			}
 		},
-		"node_modules/text-segmentation": {
-			"version": "1.0.3",
-			"resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
-			"integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
-			"license": "MIT",
-			"optional": true,
-			"dependencies": {
-				"utrie": "^1.0.2"
-			}
-		},
 		"node_modules/text-table": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -14244,16 +14033,6 @@
 			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 			"dev": true
 		},
-		"node_modules/utrie": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
-			"integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
-			"license": "MIT",
-			"optional": true,
-			"dependencies": {
-				"base64-arraybuffer": "^1.0.2"
-			}
-		},
 		"node_modules/validate-npm-package-license": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
diff --git a/src/ui/UserPortal/package.json b/src/ui/UserPortal/package.json
index b7a953a48b..87ce072e43 100644
--- a/src/ui/UserPortal/package.json
+++ b/src/ui/UserPortal/package.json
@@ -36,7 +36,6 @@
 		"floating-vue": "^2.0.0",
 		"highlight.js": "^11.10.0",
 		"javascript-time-ago": "^2.5.9",
-		"jspdf": "^2.5.2",
 		"katex": "^0.16.11",
 		"marked": "^14.1.0",
 		"marked-highlight": "^2.1.3",