Merge pull request #2111 from solliancenet/ah-ui-chat-print-improvement

Improved Print Functionality for User Portal

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>

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>
@@ -193,6 +199,10 @@ export default {
 			await this.$authStore.logout();
 		},
 
+		handlePrint() {
+			window.print();
+    },
+    
 		async setAgentOptions() {
 			this.agentOptions = this.$appStore.agents.map((agent) => ({
 				label: agent.resource.name,
@@ -371,6 +381,10 @@ export default {
 	box-shadow: 0 0 0 0.1rem #fff;
 }
 
+.print-button {
+	margin-left: 8px;
+}
+
 .no-agents {
 	position: fixed;
 	top: 60px;
@@ -418,6 +432,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;
 }