@meetelise/chat 1.3.1 → 1.4.3

package/src/MEChat.tsx

@@ -0,0 +1,277 @@
+import Talk from "talkjs";
+import fetchBuildingInfo, { Building } from "./fetchBuildingInfo";
+import { getChatID, createChatID } from "./chatID";
+import createConversation from "./createConversation";
+import installTalkJSStyles from "./installTalkJSStyles";
+import resolveTheme, { Theme } from "./resolveTheme";
+import Analytics from "./analytics";
+import ChatBubble from "./ChatBubble";
+import ReactDOM from "react-dom";
+import React from "react";
+import * as LDClient from "launchdarkly-js-client-sdk";
+import LaunchDarkly from "./launchDarklyManager";
+import styles from "./MEChat.module.scss";
+
+/**
+ * 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 {
+  static session: Promise<Talk.Session> = Talk.ready.then(() => {
+    const me = new Talk.User({
+      id: "anonymous",
+      name: "Me",
+      email: null,
+      role: "default",
+    });
+    return new Talk.Session({
+      appId: "ogKIvCor",
+      me,
+    });
+  });
+
+  /**
+   * 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 {
+    return new MEChat(opts);
+  }
+
+  /**
+   * 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 {
+    this.popup.then((p) => p.destroy());
+  }
+
+  /**
+   * Clear all messages from the window and start a new conversation.
+   */
+  restartConversation(): void {
+    Promise.all([MEChat.session, this.building, this.popup]).then(
+      ([session, building, popup]) => {
+        this.chatId = createChatID(this.orgSlug, this.buildingSlug);
+        this.analytics.chatId = this.chatId;
+        popup.select(
+          createConversation(
+            session,
+            building,
+            resolveTheme(building, this.theme),
+            this.chatId
+          )
+        );
+      }
+    );
+  }
+
+  /**
+   * Update the theme of the running chat instance.
+   *
+   * @param theme The updated theme
+   */
+  setTheme(theme: Partial<Theme>): void {
+    const focusedElement = document.activeElement;
+    Promise.all([
+      MEChat.session,
+      this.building,
+      this.popup,
+      LaunchDarkly.isReady,
+    ])
+      .then(([session, building, popup]) => {
+        const resolvedTheme = (this.theme = resolveTheme(building, {
+          ...this.theme,
+          ...theme,
+        }));
+        popup.select(
+          createConversation(session, building, resolvedTheme, this.chatId)
+        );
+        installTalkJSStyles(resolvedTheme);
+        return new Promise(requestAnimationFrame);
+      })
+      .then(() => {
+        if (!focusedElement) return;
+        if (focusedElement instanceof HTMLElement) focusedElement.focus();
+        else focusedElement.parentElement?.focus();
+      });
+  }
+
+  /** Open the messages window */
+  open(): void {
+    this.popup.then((p) => p.show());
+  }
+
+  /** Close the messages window */
+  close(): void {
+    this.popup.then((p) => p.hide());
+  }
+
+  /** Show the chat button on the screen if it was previously hidden. */
+  show(): void {
+    this.launcher.then((a) => (a.style.display = ""));
+  }
+
+  /** Hide the chat button from the screen (but don't remove from the DOM). */
+  hide(): void {
+    this.launcher.then((a) => (a.style.display = "none"));
+  }
+
+  /** Show a speech bubble next to the chat button (launcher). Also adds some animations to the button. */
+  private addChatBubble(popup: Talk.Popup, launcher: HTMLAnchorElement): void {
+    const chatBubbleTarget = document.createElement("div");
+    // set up scroll listener before mounting the chat bubble component so we don't miss any scroll events
+    const closeChatBubble = (shouldFade = false) => {
+      if (shouldFade) {
+        chatBubbleTarget.classList.add(styles.fadeOut);
+        setTimeout(() => {
+          ReactDOM.unmountComponentAtNode(chatBubbleTarget);
+        }, 500);
+      } else {
+        ReactDOM.unmountComponentAtNode(chatBubbleTarget);
+      }
+    };
+    // wrap the launcher and chat bubble so we can position them together but also manipulate them independently
+    const wrapper = document.createElement("div");
+    // for us, the wrapper contains the chat bubble and launcher. for consumers, we'll just call the wrapper the launcher.
+    wrapper.classList.add(styles.wrapper, "meetelise-chat", "launcher");
+    launcher.parentNode?.appendChild(wrapper);
+    wrapper.appendChild(launcher);
+    wrapper.appendChild(chatBubbleTarget);
+    // TalkJS positions the launcher, but we want to control its position ourselves
+    launcher.style.position = "unset";
+    launcher.style.top = "unset";
+    launcher.style.right = "unset";
+    // we initially hide the launcher in CSS so it doesn't visibly jump when we remove the native TalkJS positioning. Unhide it now.
+    launcher.classList.add(styles.shouldBeVisible);
+
+    popup.on("open", () => closeChatBubble());
+    const triggerBounce = () => {
+      launcher.classList.add(styles.bouncingLauncherButton);
+      launcher.addEventListener("animationend", () => {
+        launcher.classList.remove(styles.bouncingLauncherButton);
+      });
+    };
+    const bounceInterval = 3;
+    ReactDOM.render(
+      <ChatBubble
+        messages={[
+          {
+            title: "Ask us a question",
+            text: "I can also help you schedule a tour.",
+          },
+        ]}
+        triggerBounce={triggerBounce}
+        bounceIntervalInSeconds={bounceInterval}
+        onClick={() => {
+          popup.show();
+          closeChatBubble();
+        }}
+      />,
+      chatBubbleTarget
+    );
+    setTimeout(() => closeChatBubble(true), bounceInterval * 1000 + 3000);
+    // TODO: remove? it seems to be triggered immediately on https://www.simpsonpropertygroup.com/apartments/houston-texas/skyhouse-river-oaks-galleria without scrolling
+    // document.addEventListener("scroll", () => closeChatBubble(true));
+  }
+
+  private buildingSlug: string;
+  private orgSlug: string;
+  private popup: Promise<Talk.Popup>;
+  private launcher: Promise<HTMLAnchorElement>;
+  private building: Promise<Building>;
+  private theme: Partial<Theme>;
+  private chatId: string;
+  private analytics: Analytics;
+  private launchDarklyClient: LDClient.LDClient;
+
+  private constructor({ organization, building, theme = {} }: Options) {
+    this.orgSlug = organization;
+    this.buildingSlug = building;
+    this.chatId = getChatID(organization, building);
+    this.analytics = new Analytics(organization, building, this.chatId);
+    this.launchDarklyClient = LaunchDarkly.getClient(this.chatId);
+    this.analytics.ping("load");
+    this.theme = theme;
+    this.building = fetchBuildingInfo(organization, building);
+
+    this.popup = Promise.all([
+      this.building,
+      MEChat.session,
+      LaunchDarkly.isReady,
+    ]).then(async ([building, session]) => {
+      const resolvedTheme = (this.theme = resolveTheme(building, theme));
+      installTalkJSStyles(resolvedTheme);
+      const p = session.createPopup(
+        createConversation(session, building, resolvedTheme, this.chatId)
+      );
+      p.on("open", () => {
+        this.analytics.ping("open");
+      });
+      if (building.conversationMaintenanceMode) {
+        return new Promise(() => {
+          // If in maintenance mode, we return an always-pending Promise
+          // eslint-disable-next-line no-console
+          console.warn(
+            "MeetElise Chat is in maintenance mode. Chat icon will not appear."
+          );
+        });
+      }
+      await p.mount({ show: false });
+      const talkjsPopupElement = document.querySelector(".__talkjs_popup");
+      if (!talkjsPopupElement) throw new Error("Failed to find chat window");
+      talkjsPopupElement.classList.add("meetelise-chat", "pane");
+      return p;
+    });
+
+    this.launcher = Promise.all([this.popup, LaunchDarkly.isReady]).then(
+      async ([popup]) => {
+        const talkjsLauncherElement = document.querySelector<HTMLAnchorElement>(
+          "a#__talkjs_launcher"
+        );
+        if (!talkjsLauncherElement)
+          throw new Error("MeetElise Chat: Could not locate launcher.");
+
+        const webchatBubbleFlag = this.launchDarklyClient.variation(
+          "webchat-bubble",
+          false
+        );
+        this.analytics.setFeatureFlags({
+          webchatBubble: webchatBubbleFlag,
+        });
+        this.analytics.ping("receivedFeatureFlags");
+
+        if (webchatBubbleFlag) {
+          // TODO: The new icon hasn't been designed for color customization yet, so temporarily disable the background theme color
+          talkjsLauncherElement.style.backgroundColor = "white";
+          this.addChatBubble(popup, talkjsLauncherElement);
+        } else {
+          talkjsLauncherElement.classList.add(
+            "meetelise-chat",
+            "launcher",
+            styles.shouldBeVisible
+          );
+        }
+        return talkjsLauncherElement;
+      }
+    );
+  }
+}
+
+export interface Options {
+  building: string;
+  organization: string;
+  theme?: Partial<Theme>;
+}

package/src/analytics.ts

@@ -4,12 +4,24 @@
 export default class Analytics {
   private org: string;
   private building: string;
+  private featureFlags?: Record<string, boolean>;
   public chatId: string;
 
   constructor(org: string, building: string, chatId: string) {
     this.org = org;
     this.building = building;
     this.chatId = chatId;
+    this.featureFlags = {};
+  }
+
+  /**
+   * Store feature flag value(s) on the Analytics object to be sent with future pings. If `featureFlags` object is already present, the argument is merged into it.
+   */
+  setFeatureFlags(featureFlags: Record<string, boolean>): void {
+    this.featureFlags = {
+      ...this.featureFlags,
+      ...featureFlags,
+    };
   }
 
   /**
@@ -28,6 +40,7 @@ export default class Analytics {
         org: this.org,
         building: this.building,
         referrer: document.referrer,
+        featureFlags: this.featureFlags,
       }),
     });
   }

package/src/getIcons.ts

@@ -1,4 +1,5 @@
 import { Theme } from "./resolveTheme";
+import LaunchDarkly from "./launchDarklyManager";
 
 /**
  * Get a pair of close, open icons for a building.
@@ -6,16 +7,14 @@ import { Theme } from "./resolveTheme";
  * @param theme - The building, to get theme colors.
  * @returns a pair of svg data URLs.
  */
-export default function getIcons(theme: Theme): [string, string] {
-  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">
+export default function getIcons(theme: Theme): [string, string] {
+  const useNewIcons = LaunchDarkly.getClient().variation(
+    "webchat-bubble",
+    false
+  );
+  const oldOpenIcon = `
+  <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}"/>
@@ -24,8 +23,24 @@ export default function getIcons(theme: Theme): [string, string] {
             <ellipse id="Oval-1" fill="${theme.launchButtonColor}" cx="306.050106" cy="162.184556" rx="28.3476608" ry="28.1845557"/>
         </g>
     </g>
-	</svg>
-	`);
+  </svg>
+  `;
+  const newOpenIcon = `
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13.2 10.8H6C5.68174 10.8 5.37652 10.9264 5.15147 11.1515C4.92643 11.3765 4.8 11.6817 4.8 12C4.8 12.3183 4.92643 12.6235 5.15147 12.8485C5.37652 13.0736 5.68174 13.2 6 13.2H13.2C13.5183 13.2 13.8235 13.0736 14.0485 12.8485C14.2736 12.6235 14.4 12.3183 14.4 12C14.4 11.6817 14.2736 11.3765 14.0485 11.1515C13.8235 10.9264 13.5183 10.8 13.2 10.8ZM18 6H6C5.68174 6 5.37652 6.12643 5.15147 6.35147C4.92643 6.57652 4.8 6.88174 4.8 7.2C4.8 7.51826 4.92643 7.82348 5.15147 8.04853C5.37652 8.27357 5.68174 8.4 6 8.4H18C18.3183 8.4 18.6235 8.27357 18.8485 8.04853C19.0736 7.82348 19.2 7.51826 19.2 7.2C19.2 6.88174 19.0736 6.57652 18.8485 6.35147C18.6235 6.12643 18.3183 6 18 6ZM20.4 0H3.6C2.64522 0 1.72955 0.379285 1.05442 1.05442C0.379285 1.72955 0 2.64522 0 3.6V15.6C0 16.5548 0.379285 17.4705 1.05442 18.1456C1.72955 18.8207 2.64522 19.2 3.6 19.2H17.508L21.948 23.652C22.0601 23.7632 22.1931 23.8512 22.3393 23.9109C22.4855 23.9706 22.6421 24.0009 22.8 24C22.9574 24.0041 23.1136 23.9712 23.256 23.904C23.4751 23.814 23.6627 23.6611 23.7951 23.4646C23.9275 23.2682 23.9988 23.0369 24 22.8V3.6C24 2.64522 23.6207 1.72955 22.9456 1.05442C22.2705 0.379285 21.3548 0 20.4 0ZM21.6 19.908L18.852 17.148C18.7399 17.0368 18.6069 16.9488 18.4607 16.8891C18.3145 16.8294 18.1579 16.7991 18 16.8H3.6C3.28174 16.8 2.97652 16.6736 2.75147 16.4485C2.52643 16.2235 2.4 15.9183 2.4 15.6V3.6C2.4 3.28174 2.52643 2.97652 2.75147 2.75147C2.97652 2.52643 3.28174 2.4 3.6 2.4H20.4C20.7183 2.4 21.0235 2.52643 21.2485 2.75147C21.4736 2.97652 21.6 3.28174 21.6 3.6V19.908Z" fill="#202020"/>
+  </svg>`;
+  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="${
+          useNewIcons ? "black" : theme.launchButtonIconColor
+        }"/>
+    </g>
+	</svg>`);
+
+  const open = toDataUrl(useNewIcons ? newOpenIcon : oldOpenIcon);
 
   return [open, close];
 }

package/src/launchDarklyManager.ts

@@ -0,0 +1,30 @@
+import * as LDClient from "launchdarkly-js-client-sdk";
+
+export default class LaunchDarkly {
+  private static client: LDClient.LDClient;
+  static isReady: Promise<boolean>;
+
+  static getClient(chatId?: string): LDClient.LDClient {
+    if (!LaunchDarkly.client) {
+      if (!chatId) {
+        throw new Error(
+          "chatId argument is required on first call of LaunchDarkly.getClient"
+        );
+      }
+      const user = {
+        key: chatId,
+        custom: {
+          userType: "webchatUser",
+        },
+      };
+      LaunchDarkly.client = LDClient.initialize(
+        process.env.LAUNCHDARKLY_CLIENT_ID || "",
+        user
+      );
+      LaunchDarkly.isReady = new Promise((resolve) =>
+        LaunchDarkly.client.on("ready", resolve)
+      );
+    }
+    return LaunchDarkly.client;
+  }
+}

package/src/utils.ts

@@ -0,0 +1,24 @@
+import { useEffect, useRef, useLayoutEffect } from "react";
+
+// https://usehooks-ts.com/react-hook/use-interval
+export function useInterval(callback: () => void, delay: number | null): void {
+  const savedCallback = useRef(callback);
+
+  // Remember the latest callback if it changes.
+  useLayoutEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Set up the interval.
+  useEffect(() => {
+    // Don't schedule if no delay is specified.
+    // Note: 0 is a valid value for delay.
+    if (!delay && delay !== 0) {
+      return;
+    }
+
+    const id = setInterval(() => savedCallback.current(), delay);
+
+    return () => clearInterval(id);
+  }, [delay]);
+}

package/tsconfig.json

@@ -12,12 +12,12 @@
     ] /* Specify library files to be included in the compilation. */,
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
-    // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
+    "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */,
     "declaration": true /* Generates corresponding '.d.ts' file. */,
     // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
     "sourceMap": true /* Generates corresponding '.map' file. */,
     // "outFile": "./",                             /* Concatenate and emit output to single file. */
-    "outDir": "./dist" /* Redirect output structure to the directory. */,
+    "outDir": "./public/ts-loader-build" /* Redirect output structure to the directory. */,
     // "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "composite": true,                           /* Enable project compilation */
     // "tsBuildInfoFile": "./",                     /* Specify file to store incremental compilation information */
@@ -70,7 +70,8 @@
 
     /* Advanced Options */
     "skipLibCheck": true /* Skip type checking of declaration files. */,
-    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
+    "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
-  "include": ["./index.ts"]
+  "include": ["./src/MEChat.tsx", "declarations.d.ts"]
 }

package/web-test-runner.config.js

@@ -10,7 +10,7 @@ export default {
       statements: 80,
       branches: 80,
       lines: 80,
-      functions: 80,
+      // functions: 80,
     },
   },
 };

package/webpack.config.cjs

@@ -0,0 +1,65 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const Dotenv = require("dotenv-webpack");
+const { EnvironmentPlugin } = require("webpack");
+
+module.exports = (env) => {
+  return {
+    devServer: {
+      static: "./public/demo",
+      hot: true,
+      port: 8000,
+    },
+    entry: env.isDemoApp ? "./src/DemoApp.tsx" : "./src/MEChat.tsx",
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: "ts-loader",
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.(c|sa|sc)ss$/,
+          use: [
+            "style-loader",
+            // Emits TypeScript declaration files matching your CSS Modules
+            "css-modules-typescript-loader",
+            "css-loader",
+            "sass-loader",
+          ],
+        },
+      ],
+    },
+    resolve: {
+      extensions: [".tsx", ".ts", ".js", ".css", ".scss"],
+    },
+    experiments: {
+      outputModule: !env.isDemoApp,
+    },
+    output: {
+      filename: "bundle.js",
+      sourceMapFilename: "bundle.js.map",
+      ...(env.isDemoApp
+        ? {
+            path: path.resolve(__dirname, "./public/demo/built"),
+          }
+        : {
+            path: path.resolve(__dirname, "public/dist"),
+            library: {
+              type: "module",
+            },
+          }),
+    },
+    plugins: [
+      ...(env.isDemoApp
+        ? [new HtmlWebpackPlugin({ template: "./public/demo/index.html" })]
+        : []),
+      new Dotenv(),
+      new EnvironmentPlugin({
+        IS_DEMO_APP: !!env.isDemoApp,
+        LAUNCHDARKLY_CLIENT_ID: "6119b3a2ceeceb24f45c7e66",
+      }),
+    ],
+  };
+};

package/dist/index.d.ts

@@ -1 +0,0 @@
-export { default } from "./src/MEChat";

package/dist/index.js

@@ -1,2 +0,0 @@
-export { default } from "./src/MEChat";
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}