@meetelise/chat - npm Package Compare versions

Comparing version 1.0.0-rc.9 to 1.0.0-rc.10

dist/index.d.ts

 declare module "src/fetchBuildingInfo" {
+    /**
+     * The response from the API.
+     */
     export interface Building {
         id: number;
+        avatarInitials: string | null;
+        avatarSrc: string | null;
+        backgroundColor: string | null;
+        bannerColor: string | null;
+        chatSubtitle: string | null;
+        chatTitle: string | null;
+        launchButtonColor: string | null;
+        launchButtonIconColor: string | null;
+        launchButtonSize: string | null;
+        logoSrc: string | null;
+        messageColor: string | null;
         name: string;
         primaryColor: string | null;
-        backgroundColor: string | null;
-        logoSrc: string | null;
+        userFirstName: string;
         userId: number;
-        userFirstName: string;
         userLastName: string | null;
@@ -20,6 +32,21 @@ welcomeMessage: string | null;
      */
-    export function fetchBuildingInfo(orgSlug: string, buildingSlug: string): Promise<Building>;
+    export default function fetchBuildingInfo(orgSlug: string, buildingSlug: string): Promise<Building>;
 }
-declare module "src/getChatID" {
+declare module "src/getAvatarUrl" {
+    import { Building } from "src/fetchBuildingInfo";
     /**
+     * Get the avatar URL for a building.
+     *
+     * If the client has uploaded an image, returns its URL. If the client
+     * hasn't uploaded an image but has set their initials, returns an SVG
+     * data URL of a circle with their initials in it. If the client hasn't
+     * chosen an image or initials, returns null.
+     *
+     * @param building The building public theme info.
+     * @returns a URL suitable for use as a CSS background-image or <img> src.
+     */
+    export default function getAvatarURL(building: Building): string;
+}
+declare module "src/chatID" {
+    /**
      * Get or create a UUID that is the same between browser sessions.
@@ -30,5 +57,29 @@ *
     export function getChatID(): string;
+    /**
+     * Create a new chat ID and discard any old one.
+     */
+    export function createChatID(): string;
 }
-declare module "src/startTalkJS" {
+declare module "src/resolveTheme" {
     import { Building } from "src/fetchBuildingInfo";
+    export interface Theme {
+        avatarInitials: string;
+        avatarSrc: string | null;
+        bannerColor: string;
+        bannerTextColor: string;
+        chatSubtitle?: string | null;
+        chatTitle: string;
+        launchButtonColor: string;
+        launchButtonIconColor: string;
+        launchButtonSize: string;
+        messageColor: string;
+        messageTextColor: string;
+    }
+    export default function resolveTheme(building: Building, theme: Partial<Theme>): Theme;
+}
+declare module "src/talkjsFns" {
+    import Talk from 'talkjs';
+    import { Building } from "src/fetchBuildingInfo";
+    import { Theme } from "src/resolveTheme";
+    export function initialize(): Promise<void>;
     /**
@@ -39,4 +90,87 @@ * Initialize TalkJS and show the chat widget on the screen.
      */
-    export function startTalkJS(building: Building): Promise<void>;
+    export function createTalkJSPopup(building: Building, theme: Theme): Talk.Popup;
+    export function restartConversation(building: Building, theme: Theme): void;
+    export function updateTheme(building: Building, theme: Theme): void;
 }
-declare module "index" { }
+declare module "src/getIcons" {
+    import { Theme } from "src/resolveTheme";
+    /**
+     * Get a pair of close, open icons for a building.
+     *
+     * @param theme - The building, to get theme colors.
+     * @returns a pair of svg data URLs.
+     */
+    export default function getIcons(theme: Theme): [string, string];
+}
+declare module "src/installTalkJSStyles" {
+    import { Theme } from "src/resolveTheme";
+    /**
+     * Overrides the TalkJS stylesheet so our icons have the right colors.
+     *
+     * This is done via stylesheets so that we can change the style
+     * _before_ the launcher is added to the DOM.
+     */
+    export default function installTalkJSStyles(theme: Theme): void;
+}
+declare module "src/MEChat" {
+    import { Theme } from "src/resolveTheme";
+    /**
+     * The interface to MeetElise chat.
+     *
+     * To add meetelise chat to the screen, call its static method
+     * `start()` with your building and organization slug.
+     *
+     * @example
+     * MEChat.start({
+     *   organization: 'the-jacobson-group',
+     *   building: 'twin-rivers-pointe'
+     * });
+     */
+    export default class MEChat {
+        /**
+         * Start an instance of MeetElise chat and add to the web page.
+         *
+         * @param opts The organization, building, and theme overrides.
+         * @returns An instance of MeetElise chat.
+         */
+        static start(opts: Options): MEChat;
+        /**
+         * Remove the instance from the screen.
+         *
+         * Chat will be unusable after this. If you just need to hide the
+         * chat button, use {@link MEChat#hide} instead.
+         */
+        remove(): void;
+        /**
+         * Clear all messages from the window and start a new conversation.
+         */
+        restartConversation(): void;
+        /**
+         * Update the theme of the running chat instance.
+         *
+         * @param theme The updated theme
+         */
+        setTheme(theme: Partial<Theme>): void;
+        /** Open the messages window */
+        open(): void;
+        /** Close the messages window */
+        close(): void;
+        /** Show the chat button on the screen if it was previously hidden. */
+        show(): void;
+        /** Hide the chat button from the screen (but don't remove from the DOM). */
+        hide(): void;
+        private popup;
+        private launcher;
+        private building;
+        private theme;
+        private constructor();
+    }
+    export interface Options {
+        building: string;
+        organization: string;
+        theme?: Partial<Theme>;
+    }
+}
+declare module "index" {
+    export { default, Options } from "src/MEChat";
+}

dist/index.js

 // src/fetchBuildingInfo.ts
-function fetchBuildingInfo(orgSlug2, buildingSlug2) {
+async function fetchBuildingInfo(orgSlug, buildingSlug) {
   const host = "https://app.meetelise.com";
-  const url = `${host}/api/pub/v1/organization/${orgSlug2}/building/${buildingSlug2}`;
-  return fetch(url).then((res) => res.json());
+  const url = `${host}/api/pub/v1/organization/${orgSlug}/building/${buildingSlug}`;
+  const response = await fetch(url);
+  const building = await response.json();
+  return building;
 }
@@ -31,2 +33,26 @@
 
+// src/getAvatarUrl.ts
+function getAvatarURL(building) {
+  if (building.avatarSrc)
+    return building.avatarSrc;
+  const initials = building.avatarInitials;
+  const bgColor = building.launchButtonColor;
+  const initialsSvg = `
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+		  <rect x="0" y="0" width="100" height="100" fill="${bgColor}" />
+			<text
+				x="50%"
+				y="54%"
+				dominant-baseline="middle"
+				font-size="34"
+				font-family="San Francisco, Segoe UI, Helvetica Neue, Arial, Helvetica, sans-serif"
+				fill="#fff"
+				text-anchor="middle"
+			>${initials}</text>
+		</svg>
+	`.trim().replace(/\s+/, " ");
+  const b64svg = btoa(initialsSvg);
+  return `data:image/svg+xml;base64,${b64svg}`;
+}
+
 // node_modules/uuid/dist/esm-browser/rng.js
@@ -86,3 +112,3 @@ var getRandomValues;
 
-// src/getChatID.ts
+// src/chatID.ts
 var key = "com.meetelise.chatID";
@@ -97,7 +123,14 @@ function getChatID() {
 }
+function createChatID() {
+  const id = v4_default();
+  localStorage.setItem(key, id);
+  return id;
+}
 
-// src/startTalkJS.ts
-async function startTalkJS(building) {
+// src/talkjsFns.ts
+var me;
+var session;
+async function initialize() {
   await index_esnext_default.ready;
-  const me = new index_esnext_default.User({
+  me = new index_esnext_default.User({
     id: "anonymous",
@@ -108,15 +141,30 @@ name: "Me",
   });
-  const session = new index_esnext_default.Session({
+  session = new index_esnext_default.Session({
     appId: "t1OiQxbE",
     me
   });
+}
+function createTalkJSPopup(building, theme) {
+  const popup = session.createPopup(createConversation(building, theme, getChatID()));
+  return popup;
+}
+function restartConversation(building, theme) {
+  const popup = session.getPopups()[0];
+  popup.select(createConversation(building, theme, createChatID()));
+}
+function updateTheme(building, theme) {
+  const popup = session.getPopups()[0];
+  popup.select(createConversation(building, theme, getChatID()));
+}
+function createConversation(building, theme, chatID) {
   const agent = new index_esnext_default.User({
     id: `building_${building.id}`,
-    name: building.userFirstName ?? building.name,
+    name: building.userFirstName,
     email: null,
-    photoUrl: building.logoSrc || null,
+    photoUrl: getAvatarURL(building),
     role: "default",
     welcomeMessage: building.welcomeMessage
   });
-  const conversation = session.getOrCreateConversation(getChatID());
+  const conversation = session.getOrCreateConversation(chatID);
+  conversation.subject = theme.chatTitle;
   conversation.setParticipant(me);
@@ -126,11 +174,132 @@ conversation.setParticipant(agent);
     buildingId: building.id.toString(),
-    userId: building.userId.toString()
+    userId: building.userId.toString(),
+    subtitle: theme.chatSubtitle ?? null,
+    bannerColor: theme.bannerColor,
+    bannerTextColor: theme.bannerTextColor,
+    messageColor: theme.messageColor,
+    messageTextColor: theme.messageTextColor
   };
-  const popup = session.createPopup(conversation);
-  return popup.mount({ show: false });
+  return conversation;
 }
 
-// index.ts
-var [orgSlug, buildingSlug] = new URL(import.meta.url).hash.slice(1).split("/");
-fetchBuildingInfo(orgSlug, buildingSlug).then(startTalkJS);
+// src/getIcons.ts
+function getIcons(theme) {
+  const close = toDataUrl(`
+	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="312px" height="312px" viewBox="0 0 312 312" version="1.1">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="${theme.launchButtonIconColor}" fill-rule="evenodd">
+        <path d="M178.500682,155.862614 L306.579682,28.4831591 C312.720136,22.4048864 312.720136,12.5646136 306.579682,6.50188636 C300.454773,0.423613636 290.505682,0.423613636 284.380773,6.50188636 L156.410591,133.772523 L27.2589545,4.60534091 C21.1340455,-1.53511364 11.1849545,-1.53511364 5.06004545,4.60534091 C-1.06486364,10.7613409 -1.06486364,20.7259773 5.06004545,26.8664318 L134.118409,155.940341 L4.59368182,284.749977 C-1.53122727,290.82825 -1.53122727,300.668523 4.59368182,306.73125 C10.7185909,312.809523 20.6676818,312.809523 26.7925909,306.73125 L156.2085,178.030432 L284.847136,306.684614 C290.972045,312.825068 300.921136,312.825068 307.046045,306.684614 C313.170955,300.528614 313.170955,290.563977 307.046045,284.423523 L178.500682,155.862614 L178.500682,155.862614 Z" id="Close" fill="${theme.launchButtonIconColor}"/>
+    </g>
+	</svg>`);
+  const open = toDataUrl(`
+	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="420px" height="420px" viewBox="0 0 420 420" version="1.1">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Shape" fill="${theme.launchButtonIconColor}">
+            <path d="M187.402765,324.536547 L305.950138,417.398656 C307.890958,418.88487 309.079928,419.636719 310.233929,419.636719 C313.521083,419.636719 314.500236,417.416141 314.500236,413.726835 L314.500236,325.900367 C314.500236,319.69324 318.574209,314.762509 324.081941,314.762509 L367.182129,314.727539 C405.981041,314.727539 419.636719,295.599099 419.636719,279.757812 L419.636719,34.9697266 C419.636719,17.4848633 406.558041,0 366.937341,0 L52.2622563,0 C14.0228604,0 0,16.9428325 0,34.9697266 L0,279.757812 C0,296.700645 14.4774668,314.727539 52.4545898,314.727539 L157.36377,314.727539 C157.36377,314.727539 179.307273,315.339509 187.402765,324.536547 L187.402765,324.536547 Z" fill="${theme.launchButtonIconColor}"/>
+            <ellipse id="Oval-1" fill="${theme.launchButtonColor}" cx="115.347661" cy="162.184556" rx="28.3476608" ry="28.1845557"/>
+            <ellipse id="Oval-1" fill="${theme.launchButtonColor}" cx="210.698884" cy="162.184556" rx="28.3476608" ry="28.1845557"/>
+            <ellipse id="Oval-1" fill="${theme.launchButtonColor}" cx="306.050106" cy="162.184556" rx="28.3476608" ry="28.1845557"/>
+        </g>
+    </g>
+	</svg>
+	`);
+  return [open, close];
+}
+var toDataUrl = (svg) => {
+  const trimmed = svg.replace(/\s+/, " ").trim();
+  return `data:image/svg+xml;base64,${btoa(trimmed)}`;
+};
+
+// src/installTalkJSStyles.ts
+function installTalkJSStyles(theme) {
+  const styleOverrides = document.createElement("style");
+  document.head.appendChild(styleOverrides);
+  const [openIcon, closeIcon] = getIcons(theme);
+  styleOverrides.sheet?.insertRule(`#__talkjs_launcher {
+		background-color: ${theme.launchButtonColor};
+	}`);
+  styleOverrides.sheet?.insertRule(`#__talkjs_launcher.closed {
+		background-image: url(${openIcon});
+	}`);
+  styleOverrides.sheet?.insertRule(`#__talkjs_launcher.open {
+		background-image: url(${closeIcon});
+	}`);
+}
+
+// src/resolveTheme.ts
+function resolveTheme(building, theme) {
+  return {
+    avatarInitials: theme.avatarInitials ?? building.avatarInitials ?? building.userFirstName[0],
+    avatarSrc: theme.avatarSrc ?? building.avatarSrc,
+    bannerColor: theme.bannerColor ?? building.bannerColor ?? "#e7ecee",
+    bannerTextColor: "rgba(0, 0, 0, 0.88)",
+    chatSubtitle: theme.chatSubtitle ?? building.chatSubtitle,
+    chatTitle: theme.chatTitle ?? building.chatTitle ?? building.userFirstName,
+    launchButtonColor: theme.launchButtonColor ?? building.launchButtonColor ?? "#0785f2",
+    launchButtonIconColor: theme.launchButtonIconColor ?? building.launchButtonIconColor ?? "#ffffff",
+    launchButtonSize: theme.launchButtonSize ?? building.launchButtonSize ?? "60px",
+    messageColor: theme.messageColor ?? building.messageColor ?? "#0785f2",
+    messageTextColor: "#fff"
+  };
+}
+
+// src/MEChat.ts
+var MEChat = class {
+  static start(opts) {
+    return new MEChat(opts);
+  }
+  remove() {
+    this.popup.then((p) => p.destroy());
+    this.popup = Promise.reject(new Error("MeetElise chat remove() has already been called."));
+  }
+  restartConversation() {
+    this.building.then((b) => {
+      restartConversation(b, resolveTheme(b, this.theme));
+    });
+  }
+  setTheme(theme) {
+    this.close();
+    this.building.then((b) => {
+      const resolvedTheme = this.theme = resolveTheme(b, {
+        ...this.theme,
+        ...theme
+      });
+      updateTheme(b, resolvedTheme);
+      this.open();
+    });
+  }
+  open() {
+    this.popup.then((p) => p.show());
+  }
+  close() {
+    this.popup.then((p) => p.hide());
+  }
+  show() {
+    this.launcher.then((a) => a.style.display = "");
+  }
+  hide() {
+    this.launcher.then((a) => a.style.display = "none");
+  }
+  constructor({ organization, building, theme = {} }) {
+    this.theme = theme;
+    this.building = fetchBuildingInfo(organization, building);
+    this.popup = Promise.all([
+      this.building,
+      initialize()
+    ]).then(([building2]) => {
+      const resolvedTheme = this.theme = resolveTheme(building2, theme);
+      installTalkJSStyles(resolvedTheme);
+      const p = createTalkJSPopup(building2, resolvedTheme);
+      return p.mount({ show: false }).then(() => p);
+    });
+    this.launcher = this.popup.then(() => {
+      const a = document.querySelector("a#__talkjs_launcher");
+      if (!a)
+        throw new Error("MeetElise Chat: Could not locate launcher.");
+      return a;
+    });
+  }
+};
+export {
+  MEChat as default
+};
 //# sourceMappingURL=index.js.map

index.ts

@@ -1,6 +0,1 @@
-import { fetchBuildingInfo } from "./src/fetchBuildingInfo";
-import { startTalkJS } from "./src/startTalkJS";
-
-const [orgSlug, buildingSlug] = new URL(import.meta.url).hash.slice(1).split('/');
-
-fetchBuildingInfo(orgSlug, buildingSlug).then(startTalkJS);
+export { default, Options } from './src/MEChat';

package.json

 {
   "name": "@meetelise/chat",
-  "version": "1.0.0-rc.9",
+  "version": "1.0.0-rc.10",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/fetchBuildingInfo.ts

@@ -0,9 +1,22 @@
+/**
+ * The response from the API.
+ */
 export interface Building {
 	id: number;
+
+	avatarInitials: string | null;
+	avatarSrc: string | null;
+	backgroundColor: string | null;
+	bannerColor: string | null;
+	chatSubtitle: string | null;
+	chatTitle: string | null;
+	launchButtonColor: string | null;
+	launchButtonIconColor: string | null;
+	launchButtonSize: string | null;
+	logoSrc: string | null;
+	messageColor: string | null;
 	name: string;
 	primaryColor: string | null;
-	backgroundColor: string | null;
-	logoSrc: string | null;
+	userFirstName: string;
 	userId: number;
-	userFirstName: string;
 	userLastName: string | null;
@@ -20,6 +33,8 @@ welcomeMessage: string | null;
  */
-export function fetchBuildingInfo(orgSlug: string, buildingSlug: string): Promise<Building> {
+export default async function fetchBuildingInfo(orgSlug: string, buildingSlug: string): Promise<Building> {
 	const host = 'https://app.meetelise.com';
 	const url = `${host}/api/pub/v1/organization/${orgSlug}/building/${buildingSlug}`;
-	return fetch(url).then(res => res.json());
+	const response = await fetch(url);
+	const building: Building = await response.json();
+	return building;
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67551

increased by143.16%

Number of package files

17

increased by54.55%

Lines of code

884

increased by186.08%

Worsened metrics

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes