Merge pull request #164 from nlxai/static-icons-export

Export static icons
nlxai · Sep 27, 2024 · 46bba19 · 46bba19
2 parents 463c42f + 2098914
commit 46bba19
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 3 deletions.
diff --git a/packages/journey-manager/src/index.ts b/packages/journey-manager/src/index.ts
@@ -33,6 +33,7 @@ export type {
   TriggeredStep,
 } from "./configuration";
 export type { UrlCondition } from "./UrlCondition";
+export { iconUrls } from "./ui/components/icons";
 
 /**
  * Configuration for the run method

diff --git a/packages/journey-manager/src/ui/components/icons.tsx b/packages/journey-manager/src/ui/components/icons.tsx
@@ -1,12 +1,30 @@
 /* eslint-disable jsdoc/require-jsdoc */
 import { type FunctionComponent } from "preact";
 
+const toStaticIcon = (svgString: string): string =>
+  `data:image/svg+xml;utf8,${encodeURIComponent(svgString)}`;
+
+const staticIconColor = "#333";
+
+export const iconUrls = {
+  supportAgent: toStaticIcon(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="none" fill="${staticIconColor}"><path d="M21 12.22C21 6.73 16.74 3 12 3c-4.69 0-9 3.65-9 9.28-.6.34-1 .98-1 1.72v2c0 1.1.9 2 2 2h1v-6.1c0-3.87 3.13-7 7-7s7 3.13 7 7V19h-8v2h8c1.1 0 2-.9 2-2v-1.22c.59-.31 1-.92 1-1.64v-2.3c0-.7-.41-1.31-1-1.62"></path><circle cx="9" cy="13" r="1"></circle><circle cx="15" cy="13" r="1"></circle><path d="M18 11.03C17.52 8.18 15.04 6 12.05 6c-3.03 0-6.29 2.51-6.03 6.45 2.47-1.01 4.33-3.21 4.86-5.89 1.31 2.63 4 4.44 7.12 4.47"></path></svg>`,
+  ),
+  callEnd: toStaticIcon(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="none" fill="${staticIconColor}"><path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9"></path></svg>`,
+  ),
+  multimodal: toStaticIcon(
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="none" fill="${staticIconColor}"><path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C11.4477 20 11 20.4477 11 21C11 21.5523 11.4477 22 12 22C16.456 22 20.2313 19.0855 21.5236 15.0587C22.3766 14.8106 23 14.0231 23 13.09V11.09C23 10.1795 22.4064 9.40764 21.5851 9.14028C20.3549 5.01091 16.5291 2 12 2C7.47091 2 3.64506 5.01091 2.41488 9.14028C1.59358 9.40764 1 10.1795 1 11.09V13.09C1 14.1666 1.82988 15.0493 2.88483 15.1334C2.92262 15.1378 2.96105 15.14 3 15.14C3.55228 15.14 4 14.6923 4 14.14V12Z"></path><path d="M10.09 10.8L15.2453 6.27083L13.9005 13L8.74526 17.5292L10.09 10.8ZM12.8613 12.4C12.5851 12.8783 11.9735 13.0422 11.4953 12.766C11.017 12.4899 10.8531 11.8783 11.1292 11.4C11.4054 10.9217 12.017 10.7578 12.4953 11.034C12.9735 11.3101 13.1374 11.9217 12.8613 12.4Z"></path></svg>`,
+  ),
+};
+
 export const MultimodalIcon: FunctionComponent<unknown> = () => (
   <svg viewBox="0 0 24 24" stroke="none" fill="currentColor">
     <path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C11.4477 20 11 20.4477 11 21C11 21.5523 11.4477 22 12 22C16.456 22 20.2313 19.0855 21.5236 15.0587C22.3766 14.8106 23 14.0231 23 13.09V11.09C23 10.1795 22.4064 9.40764 21.5851 9.14028C20.3549 5.01091 16.5291 2 12 2C7.47091 2 3.64506 5.01091 2.41488 9.14028C1.59358 9.40764 1 10.1795 1 11.09V13.09C1 14.1666 1.82988 15.0493 2.88483 15.1334C2.92262 15.1378 2.96105 15.14 3 15.14C3.55228 15.14 4 14.6923 4 14.14V12Z"></path>
     <path d="M10.09 10.8L15.2453 6.27083L13.9005 13L8.74526 17.5292L10.09 10.8ZM12.8613 12.4C12.5851 12.8783 11.9735 13.0422 11.4953 12.766C11.017 12.4899 10.8531 11.8783 11.1292 11.4C11.4054 10.9217 12.017 10.7578 12.4953 11.034C12.9735 11.3101 13.1374 11.9217 12.8613 12.4Z"></path>
   </svg>
 );
+
 export const SupportAgentIcon: FunctionComponent<unknown> = () => (
   <svg viewBox="0 0 24 24" stroke="none" fill="currentColor">
     <path d="M21 12.22C21 6.73 16.74 3 12 3c-4.69 0-9 3.65-9 9.28-.6.34-1 .98-1 1.72v2c0 1.1.9 2 2 2h1v-6.1c0-3.87 3.13-7 7-7s7 3.13 7 7V19h-8v2h8c1.1 0 2-.9 2-2v-1.22c.59-.31 1-.92 1-1.64v-2.3c0-.7-.41-1.31-1-1.62"></path>
@@ -15,21 +33,25 @@ export const SupportAgentIcon: FunctionComponent<unknown> = () => (
     <path d="M18 11.03C17.52 8.18 15.04 6 12.05 6c-3.03 0-6.29 2.51-6.03 6.45 2.47-1.01 4.33-3.21 4.86-5.89 1.31 2.63 4 4.44 7.12 4.47"></path>
   </svg>
 );
+
 export const ArrowBackIcon: FunctionComponent<unknown> = () => (
   <svg viewBox="0 0 24 24" stroke="none" fill="currentColor">
     <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z"></path>
   </svg>
 );
+
 export const CallEndIcon: FunctionComponent<unknown> = () => (
   <svg viewBox="0 0 24 24" stroke="none" fill="currentColor">
     <path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9"></path>
   </svg>
 );
+
 export const CloseIcon: FunctionComponent<unknown> = () => (
   <svg viewBox="0 0 24 24" stroke="none" fill="currentColor">
     <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
   </svg>
 );
+
 export const CheckIcon: FunctionComponent<unknown> = () => (
   <svg viewBox="0 0 24 24" stroke="none" fill="currentColor">
     <path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>

diff --git a/packages/journey-manager/src/ui/custom-element.tsx b/packages/journey-manager/src/ui/custom-element.tsx
@@ -10,6 +10,14 @@ import highlightBoxShadow, {
   teardown as teardownBoxShadowHighlight,
 } from "./highlightBoxShadow";
 
+if (typeof HTMLElement === "undefined") {
+  // this is a workaround because most of JourneyManager we want to only use in the browser, but some of it we want to render server side.
+  // this shim exists just so this file can be parsed by node, but it can't be used in node.
+
+  // eslint-disable-next-line @typescript-eslint/no-extraneous-class
+  (global as any).HTMLElement = class {};
+}
+
 /**
  * @hidden @internal
  */

diff --git a/packages/journey-manager/src/ui/index.tsx b/packages/journey-manager/src/ui/index.tsx
@@ -7,7 +7,11 @@ import type {
   StepWithQueryAndElements,
 } from "../trigger";
 
-customElements.define("journey-manager", JourneyManagerElement);
+// this is a workaround because most of JourneyManager we want to only use in the browser, but some of it we want to render server side.
+// where the customElements API is not available.
+if (typeof customElements !== "undefined") {
+  customElements.define("journey-manager", JourneyManagerElement);
+}
 
 export interface Ui {
   teardown: () => void;

diff --git a/packages/website/src/components/Prototyping.tsx b/packages/website/src/components/Prototyping.tsx
@@ -1,5 +1,5 @@
 import { type FC, useRef, useEffect, useState } from "react";
-import { type Triggers, type Trigger } from "@nlxai/journey-manager";
+import { type Triggers, type Trigger, iconUrls } from "@nlxai/journey-manager";
 
 // Add extra names for triggers for logging purposes
 const triggersWithNames: Record<string, { name: string; trigger: Trigger }> = {
@@ -361,6 +361,10 @@ export const Prototyping: FC<unknown> = () => {
   return (
     <div className="space-y-4">
       <h1 className="text-xl">Test page</h1>
+      <div
+        className="w-10 h-10 bg-cover"
+        style={{ backgroundImage: `url(${iconUrls.supportAgent})` }}
+      ></div>
       {showError ? (
         <div className="p-2 rounded text-red-600 bg-red-50" id="error">
           Something went wrong

diff --git a/test-repos/chat-core/package-lock.json b/test-repos/chat-core/package-lock.json