npm - @cognigy/rest-api-client - Versions diffs - 0.17.0 → 0.19.0 - Mend

@cognigy/rest-api-client 0.17.0 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (191) hide show

package/build/shared/charts/descriptors/agentAssist/htmlTemplates/knowledgeAssistTemplate.js CHANGED Viewed

@@ -1,203 +1,380 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.knowledgeAssistTemplate = void 0;
-const knowledgeAssistTemplate = (data, promptResponse, tileId, searchString) => {
-    return `
-	<!DOCTYPE html>
-	<html lang="en">
-	<head>
-		<meta charset="UTF-8">
-  		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-  		<title>Search Knowledge Base</title>
-  		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
-	</head>
-	<body>
-		<div class="flex h-screen items-center justify-center bg-gray-100">
-			<div class="flex h-full w-full flex-col overflow-auto rounded-xl bg-white p-6 shadow-md">
-					<div class="flex items-center">
-						<div class="text-sm font-semibold uppercase tracking-wide text-indigo-500">Search</div>
-						<input id="searchInput" type="text" class="w-full rounded-l-md border p-2 ml-2" placeholder="Search your knowledge base" />
-						<button id="postbackButton" class="flex items-center rounded-r-md bg-indigo-100 px-4 py-2">
-							<img src="https://cdn-icons-png.flaticon.com/128/7047/7047900.png" alt="Search Icon" class="h-6 w-8 text-white" />
-						</button>
-					</div>
-					${postbackScript(tileId)}
-				<div class="text-sm mt-5 tracking-wide text-indigo-500">${searchString}</div>
-				${renderResults(data, promptResponse)}
-			</div>
-		</div>
-	</body>
-	</html>
-	`;
-};
-exports.knowledgeAssistTemplate = knowledgeAssistTemplate;
-const renderResults = (data, promptResponse) => {
-    let currentResultIndex = 0;
-    const navigate = (direction) => {
-        var _a, _b, _c, _d;
-        currentResultIndex = currentResultIndex + direction;
-        if (((_a = data === null || data === void 0 ? void 0 : data.topK) === null || _a === void 0 ? void 0 : _a.length) && currentResultIndex >= ((_b = data === null || data === void 0 ? void 0 : data.topK) === null || _b === void 0 ? void 0 : _b.length)) {
-            currentResultIndex = 0;
+const knowledgeAssistTemplate = ({ data, promptResponse, tileId, searchString, postMessageUrl, enableCopyToClipboard, fontSize, }) => `
+<!doctype html>
+<html lang="en" class="h-full">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Search Knowledge Base</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
+    />
+    <style>
+	  .min-w-20 {
+		min-width: 5rem
+	  }
+      @keyframes blinkGreen {
+        50% {
+          background-color: #10b981;
         }
-        if (((_c = data === null || data === void 0 ? void 0 : data.topK) === null || _c === void 0 ? void 0 : _c.length) && currentResultIndex < 0) {
-            currentResultIndex = ((_d = data === null || data === void 0 ? void 0 : data.topK) === null || _d === void 0 ? void 0 : _d.length) - 1;
-        }
-    };
-    const generateResultHTML = (resultIndex) => {
-        const result = data === null || data === void 0 ? void 0 : data.topK[resultIndex];
-        const hasSource = result.sourceMetaData.sourceName;
-        return `
-			<div class="flex-grow">
-        		<div id="resultContainer" class="flex items-center justify-center mt-2 h-full">
-          			<textarea id="textArea" class="w-full h-full rounded-md border p-2" rows="5" placeholder="Your search results will be displayed here">${promptResponse}</textarea>
-					<div id="loader" class="w-2 hidden h-30 rounded-full border-t-4 border-gray-300 border-solid animate-spin" style="border-width: 16px; border-top-color: #3498db;"></div>
-        		</div>
+      }
+      .blink-green {
+        animation: blinkGreen 0.5s ease-in-out;
+      }
+	  .knowledgeContainer {
+		display: grid;
+		grid-auto-rows: 1fr;
+		grid-template-columns: 1fr;
+		grid-template-rows: 0.5fr 2fr 0.5fr;
+		grid-template-areas:
+			"search"
+			"content"
+			"footer";
+	  }
+	  .search { grid-area: search; }
+	  .content {
+		grid-area: content;
+		overflow: auto;
+	  }
+	  .footer { grid-area: footer; }
+    </style>
+    ${postbackScript(tileId, postMessageUrl, enableCopyToClipboard)}
+  </head>
+  <body class="h-full">
+    <div
+      class="h-full items-center bg-white rounded-xl shadow-md p-4 knowledgeContainer overflow-auto"
+      data-cognigy-copilot-tile-ka
+      data-cognigy-copilot-tile
+    >
+      <div class="flex flex-wrap items-center w-full h-auto search">
+        <div
+          class="${fontSize} font-semibold uppercase tracking-wide text-indigo-500"
+        >
+          Search
+        </div>
+       		<div class="flex flex-grow rounded-md border ml-2 min-w-20">
+				<input
+					id="searchInput"
+					type="text"
+					class="w-full rounded-md p-2 focus:outline-none ${fontSize}"
+					placeholder="Search your knowledge base"
+				/>
 				<button
-					id="liveAgentForwardButton"
-					onclick="sendPostMessage()"
-					class="hidden absolute bottom-0 right-0 flex items-center justify-center"
+					id="postbackButton"
+					class="flex items-center rounded-r-md px-4 py-2"
 				>
-											<svg
-							width="45px"
-							height="auto"
-							viewBox="0 0 45 35"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<path
-								d="M 18.17 19.653 C 18.538 19.338 16.6 12.9 30.995 15.028 L 30.968 18.05 L 39.7 12.4 L 31.021 6.619 L 31.021 9.326 C 30.1 10.2 16.042 8.143 18.118 19.627"
-								fill="#0b3694"
-								transform="scale(-1, 1) translate(-50, 0)"
-							/>
-						</svg>
+				<img
+					src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14'/%3E%3C/svg%3E"
+					alt="Search Icon"
+					class="h-6 w-8 text-white"
+				/>
 				</button>
-      		</div>
-			${hasSource ? sourcesElements(result.sourceMetaData) : ""}
-		`;
-    };
-    let resultHTML = generateResultHTML(currentResultIndex);
-    return resultHTML;
+			</div>
+      </div>
+      <div class="flex flex-col w-full h-full content overflow-auto">
+        <div class="${fontSize} mt-5 tracking-wide text-indigo-500">
+          ${searchString}
+        </div>
+        ${renderPrompt(promptResponse, fontSize)} ${renderSourceElements(data, fontSize)}
+      </div>
+      <div class="flex mt-auto justify-between w-full py-2 footer">
+        ${renderButtons(enableCopyToClipboard, fontSize)}
+      </div>
+    </div>
+  </body>
+</html>
+`;
+exports.knowledgeAssistTemplate = knowledgeAssistTemplate;
+const renderPrompt = (promptResponse, fontSize) => `
+<div class="flex-grow">
+  <div
+    id="resultContainer"
+    class="flex items-center justify-center mt-2 h-full"
+  >
+    <textarea
+      id="textArea"
+      class="w-full h-full rounded-md border p-2 ${fontSize} focus:outline-none"
+      placeholder="Your search results will be displayed here"
+      data-cognigy-content
+    >
+     ${promptResponse}
+    </textarea>
+    <div
+      id="loader"
+      class="w-2 hidden h-30 rounded-full border-t-4 border-gray-300 border-solid animate-spin"
+      style="border-width: 16px; border-top-color: #3498db"
+    ></div>
+  </div>
+</div>
+`;
+const renderSourceElements = (data, fontSize) => {
+    const result = data === null || data === void 0 ? void 0 : data.topK[0];
+    const hasSource = result === null || result === void 0 ? void 0 : result.sourceMetaData.sourceName;
+    return hasSource ? sourcesElements(fontSize, result === null || result === void 0 ? void 0 : result.sourceMetaData) : "";
 };
+const renderButtons = (enableCopyToClipboard, fontSize) => `
+  ${enableCopyToClipboard
+    ? `
+ <button
+    class="min-w-20  bg-blue-500 hover:bg-blue-700 text-white font-bold rounded focus:ring-4 focus:outline-none focus:ring-blue-300 ${fontSize} py-2 items-center inline-flex justify-center hidden"
+    data-cognigy-clipboard-button
+    disabled
+  >
+    <span class="default-message">Copy</span>
+    <span class="success-message hidden inline-flex items-center gap-1">
+      <svg
+        class="w-3 h-3 text-white me-1.5"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 16 12"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M1 5.917 5.724 10.5 15 1.5"
+        />
+      </svg>
+      Copied!
+    </span>
+  </button>
+  `
+    : "<div></div>"}
+  <button
+    id="liveAgentForwardButton"
+    class="hidden"
+    disabled
+  >
+    <svg
+      width="45px"
+      height="auto"
+      viewBox="0 0 45 35"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M 18.17 19.653 C 18.538 19.338 16.6 12.9 30.995 15.028 L 30.968 18.05 L 39.7 12.4 L 31.021 6.619 L 31.021 9.326 C 30.1 10.2 16.042 8.143 18.118 19.627"
+        fill="#0b3694"
+        transform="scale(-1, 1) translate(-50, 0)"
+      />
+    </svg>
+  </button>
+`;
 /**
  * Helper function to dynamically render the sources section based on the data provided by the search.
  *
  * @param source
  * @returns
  */
-const sourcesElements = (source) => {
+const sourcesElements = (fontSize, source) => {
     var _a;
     if (!source || !source.url) {
         return "";
     }
     return `
     <div class="mt-4">
-        <div class="text-sm font-semibold uppercase tracking-wide text-indigo-500">Source</div>
+        <div class="${fontSize} font-semibold uppercase tracking-wide text-indigo-500">Source</div>
         <div class="mt-2">
             <div class="flex flex-col flex-wrap gap-2">
-                <a href="${source.url}" target="_blank" class="text-indigo-500 hover:text-indigo-600">${(_a = source.title) !== null && _a !== void 0 ? _a : source.url}</a>
-                ${source.sourceType ? `<p>${source.sourceType}</p>` : ""}
+                <a href="${source.url}" target="_blank" class="break-all text-indigo-500 ${fontSize} hover:text-indigo-600">${(_a = source.title) !== null && _a !== void 0 ? _a : source.url}</a>
+                ${source.sourceType
+        ? `<p class="${fontSize} break-all">${source.sourceType}</p>`
+        : ""}
             </div>
         </div>
     </div>
     `;
 };
-const postbackScript = (tileId) => `
+const postbackScript = (tileId, postMessageUrl, enableCopyToClipboard) => `
 <script>
+  (function () {
     const u = (o) => ({ __INTER_FRAME_SOCKET_MESSAGE: !0, workspaceEvent: o }),
-        h = (o, e) => ({ type: o, payload: e }),
-        w = (o) => {
-            var e;
-            return !!((e = o.data) != null && e.__INTER_FRAME_SOCKET_MESSAGE);
-        };
+      h = (o, e) => ({ type: o, payload: e }),
+      w = (o) => {
+        var e;
+        return !!((e = o.data) != null && e.__INTER_FRAME_SOCKET_MESSAGE);
+      };
     class b {
-        constructor(e, a, d) {
-            (this.sourceWindow = e),
-            (this.targetWindow = a),
-            (this.targetOrigin = d),
-            (this.emit = (s, r) => {
-                const t = h(s, r),
-                    i = u(t);
-                this.targetWindow.postMessage(i, this.targetOrigin);
-            });
-        }
+      constructor(e, a, d) {
+        (this.sourceWindow = e),
+          (this.targetWindow = a),
+          (this.targetOrigin = d),
+          (this.emit = (s, r) => {
+            const t = h(s, r),
+              i = u(t);
+            this.targetWindow.postMessage(i, this.targetOrigin);
+          });
+      }
     }
     class c {
-        constructor() {
-            console.log(document.referrer ?? window.origin)
+      constructor() {
+        console.log(document.referrer ?? window.origin);
-            this.socket = new b(
-                window,
-                window.parent,
-                new URL(document?.referrer || window?.origin || "https://agent-assist-dev.cognigy.ai").origin
-            );
-            c.log("initialized");
-            return this;  // Return this object.
-        }
-        postback(e) {
-            this.socket.emit("postback", e);  // Send the postback event immediately.
-            return this;  // Return this object for chaining.
-        }
-        static log(...e) {
-            console.log("[AgentAssistWorkspaceSDK]", ...e);
-        }
+        this.socket = new b(
+          window,
+          window.parent,
+          new URL(
+            document?.referrer ||
+              window?.origin ||
+              "https://agent-assist-dev.cognigy.ai",
+          ).origin,
+        );
+        c.log("initialized");
+        return this; // Return this object.
+      }
+      postback(e) {
+        this.socket.emit("postback", e); // Send the postback event immediately.
+        return this; // Return this object for chaining.
+      }
+      static log(...e) {
+        console.log("[AgentAssistWorkspaceSDK]", ...e);
+      }
     }
     window.SDK = new c();
     const triggerSearch = () => {
-        const input = document.getElementById('searchInput').value;
-		const data = {searchString: input, tileId: '${tileId}'};
-        window.SDK.postback(data);
+      const input = document.getElementById("searchInput").value;
+      const data = { searchString: input, tileId: "${tileId}" };
+      window.SDK.postback(data);
-		document.getElementById('searchInput').value = '';
-		document.getElementById('loader').style.display = 'block';
-		document.getElementById('textArea').style.display = 'none';
+      document.getElementById("searchInput").value = "";
+      document.getElementById("loader").style.display = "block";
+      document.getElementById("textArea").style.display = "none";
     };
-    document.getElementById('postbackButton').onclick = () => {
-        triggerSearch();
-    };
+    let showButton = false;
+    let showCopyButton = true;
+    function updateButtonVisibility() {
+        const elements = document.querySelectorAll(
+          "[data-cognigy-copilot-tile-ka]",
+        );
-    document.getElementById('searchInput').addEventListener('keypress', (event) => {
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            triggerSearch();
-        }
-    });
+        elements.forEach((element) => {
+          const button = element.querySelector("#liveAgentForwardButton");
+          if (button) {
+            button.className = showButton
+              ? "justify-self-end col-start-8"
+              : "hidden";
+          }
+        });
+      }
+    function updateCopyButtonVisibility() {
+      const elements = document.querySelectorAll(
+        "[data-cognigy-copilot-tile-ka]",
+      );
-	let showButton = false;
+      elements.forEach((element) => {
+        const button = element.querySelector("[data-cognigy-clipboard-button]");
+        if(!button) return;
+        if (showCopyButton) {
+          button.classList.remove("hidden");
+        }  else {
+          button.classList.add("hidden");
+        }
+      });
+    }
-	function updateButtonVisibility() {
-		const button = document.getElementById("liveAgentForwardButton");
-		const resultContainer = document.getElementById("resultContainer");
+    window.addEventListener("message", (event) => {
+      const message = event.data;
-		if (button) {
-			if (showButton) {
-				button.className = "absolute bottom-0 right-0 flex items-center justify-center";
-				resultContainer.classList.add("pb-5");
-			} else {
-				button.className = "hidden";
-				resultContainer.classList.remove("pb-5");
-			}
-		}
-	}
+      if (message.type === "toggleButton") {
+        showButton = message.show;
+        updateButtonVisibility();
+      }
+      if (message.type === "toggleCopyButton") {
+        showCopyButton = message.show;
+        updateCopyButtonVisibility();
+      }
+    });
+    function sendPostMessage() {
+      const wrapper = event.target.closest("[data-cognigy-copilot-tile]");
+      const contentElement = wrapper.querySelector(
+        "[data-cognigy-content]",
+      );
+      const content = contentElement.value.trim();
+      window.parent.postMessage(
+        { type: "replyBoxContent", content },
+        "${postMessageUrl}",
+      );
+    }
+${enableCopyToClipboard
+    ? `    async function copyToClipboard(event) {
+      const wrapper = event.target.closest("[data-cognigy-copilot-tile]");
+      const contentElement = wrapper.querySelector(
+        "[data-cognigy-content]",
+      );
+      const button = wrapper.querySelector(
+        "[data-cognigy-clipboard-button]",
+      );
+      button.classList.add("blink-green");
+      button.addEventListener(
+        "animationend",
+        function () {
+          button.classList.remove("blink-green");
+        },
+        { once: true },
+      );
-	window.addEventListener("message", (event) => {
-		const message = event.data;
+      const defaultMessage = button.querySelector(".default-message");
+      const successMessage = button.querySelector(".success-message");
-		if (message.type === "toggleButton") {
-			showButton = message.show;
-			updateButtonVisibility();
-		}
-	});
+      try {
+        await navigator.clipboard.writeText(contentElement.value.trim());
+        defaultMessage.classList.add("hidden");
+        successMessage.classList.remove("hidden");
-	function sendPostMessage() {
-		const content = document.getElementById("textArea").value;
-		window.parent.postMessage(
-		{ type: "replyBoxContent", content },
-		"${process.env.AGENT_ASSIST_WORKSPACE_FRONTEND_URL_WITH_PROTOCOL}"
-		);
-	}
+        // reset to default state
+        setTimeout(() => {
+          defaultMessage.classList.remove("hidden");
+          successMessage.classList.add("hidden");
+        }, 2000);
+      } catch (err) {
+        console.error("Failed to copy: ", err);
+      }
+    }`
+    : ""}
-	document.addEventListener("DOMContentLoaded", updateButtonVisibility);
-    </script>`;
+    document.addEventListener("DOMContentLoaded", updateButtonVisibility);
+    document.addEventListener("DOMContentLoaded", updateCopyButtonVisibility);
+    document.addEventListener("DOMContentLoaded", () => {
+      document
+      .getElementById("searchInput")
+      .addEventListener("keypress", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          triggerSearch();
+        }
+      });
+      document.querySelector("#postbackButton").addEventListener("click", triggerSearch);
+      document
+            .querySelector("[data-cognigy-copilot-tile-ka] #liveAgentForwardButton")
+            .addEventListener("click", sendPostMessage);
+      ${enableCopyToClipboard
+    ? `document
+            .querySelector("[data-cognigy-copilot-tile-ka] [data-cognigy-clipboard-button]")
+            .addEventListener("click", copyToClipboard);
+			document
+            .querySelector("[data-cognigy-copilot-tile-ka] [data-cognigy-clipboard-button]")
+            .removeAttribute("disabled");`
+    : ""}
+      document
+            .querySelector("[data-cognigy-copilot-tile-ka] #liveAgentForwardButton")
+            .removeAttribute("disabled");
+    });
+  })();
+</script>
+`;
 //# sourceMappingURL=knowledgeAssistTemplate.js.map