added pdf export

index.html

@@ -39,7 +39,7 @@ <h2>System prompt</h2>
   <div id="popup"></div>
 
 
-  <div class="container">
+  <div class="container" id="content">
     <div class="sidebar" id="sidebar">
       <div class="sidebar-content">
         <div class="card-container" id="card-container"> </div>
@@ -63,6 +63,7 @@ <h2>System prompt</h2>
         <span id="record" class="material-symbols-rounded">mic</span>
         <span id="delete-btn" class="material-symbols-rounded">delete</span>
         <span id="notifications-btn" class="material-symbols-rounded">notifications_active</span>
+        <span id="pdf-btn" class="material-symbols-rounded">picture_as_pdf</span>
       </div>
       <div style="display: inline-block; position: absolute; right: 1%;">
         <span id="settings" class="material-symbols-rounded">settings</span>
@@ -85,6 +86,8 @@ <h2>System prompt</h2>
   <script src="https://code.jquery.com/jquery-3.7.1.min.js"
     integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
   <script src="https://unpkg.com/@popperjs/core@2"></script>
   <script src="https://unpkg.com/tippy.js@6"></script>
   <script src="js/config.js"></script>

js/script.js

@@ -4,6 +4,7 @@ const chatContainer = document.querySelector(".chat-container");
 const themeButton = document.querySelector("#theme-btn");
 const notificationButtom = document.querySelector("#notifications-btn");
 const deleteButton = document.querySelector("#delete-btn");
+const pdfButton = document.querySelector("#pdf-btn");
 const logsButton = document.querySelector("#logs-btn");
 const cardsContainerEl = document.getElementById('card-container');
 const openModalBtn = document.getElementById("openModalBtn");
@@ -222,6 +223,70 @@ const loadDataFromLocalstorage = () => {
   // }
 }
 
+pdfButton.addEventListener("click", () => {
+  const { jsPDF } = window.jspdf;
+  const A4_HEIGHT = 841.89;
+  const A4_WIDTH = 595.28;
+
+  const WIDTH_MARGIN = 10;
+  const HEIGHT_MARGIN = 10;
+  const PAGE_HEIGHT = A4_HEIGHT - 2 * HEIGHT_MARGIN;
+
+  const pdf = new jsPDF('p', 'pt', 'a4');  // orientation, unit, format
+  const el =  document.getElementById('content')
+  html2canvas(el, {
+    allowTaint: true,
+    useCORS: true,
+    height: el.scrollHeight,
+    scrollX: -window.scrollX,
+    scrollY: -window.scrollY,
+  }).then(canvas =>{
+    const canvasWidth = canvas.width;
+    const canvasHeight = canvas.height;
+
+    const imgWidth = A4_WIDTH - 2 * WIDTH_MARGIN; 
+    const imgHeight = (imgWidth / canvasWidth) * canvasHeight;
+
+    const pageImg = canvas.toDataURL('image/png', 1.0);
+
+    let position = HEIGHT_MARGIN;
+    if (imgHeight > PAGE_HEIGHT) {  // need multi page pdf
+      let heightUnprinted = imgHeight;
+      while (heightUnprinted > 0) {
+        pdf.addImage(
+            pageImg,
+            'PNG',
+            WIDTH_MARGIN,
+            position,
+            imgWidth,
+            imgHeight
+        );
+
+        pdf.setFillColor(255, 255, 255);
+        pdf.rect(0, 0, A4_WIDTH, HEIGHT_MARGIN, 'F'); // margin top
+        pdf.rect(0, A4_HEIGHT - HEIGHT_MARGIN, A4_WIDTH, HEIGHT_MARGIN, 'F'); // margin bottom 
+
+        heightUnprinted -= PAGE_HEIGHT;  
+        position -= PAGE_HEIGHT; // next vertical placement
+
+        if (heightUnprinted > 0) pdf.addPage();
+      }
+    } else {
+      const pageImg = canvas.toDataURL('image/png', 1.0);
+      const usedHeight = HEIGHT_MARGIN;
+      pdf.addImage(
+        pageImg,      // img DataUrl
+        'PNG',
+        WIDTH_MARGIN, // x - position against the left edge of the page
+        usedHeight,   // y - position against the upper edge of the page
+        imgWidth,
+        imgHeight,
+      );
+    }
+    pdf.save('Waylay-Chat.pdf');
+    });
+})
+
 themeButton.addEventListener("click", () => {
   document.body.classList.toggle("light-mode");
   localStorage.setItem("themeColor", themeButton.innerText);
@@ -619,6 +684,9 @@ $('#introFrame').fadeOut(4000, () => {
       tippy('#notifications-btn', {
         content: 'Stream alarms'
       })
+      tippy('#pdf-btn', {
+        content: 'Export to PDF'
+      })
     }).catch(error => {
       showError("Bot not loaded " + error)
     })