@meetelise/chat 1.4.1 → 1.5.0

package/src/themes.ts

@@ -0,0 +1,88 @@
+export const white = "#FFFFFF";
+export const darkGray = "#202020";
+export const lightGray = "#83818E";
+
+export const defaultThemeId = "Light" as keyof typeof themesById;
+
+export const lightMessage = {
+  user: { textColor: white, backgroundColor: lightGray },
+  agent: { textColor: darkGray, backgroundColor: white },
+};
+export const darkMessage = {
+  user: { textColor: white, backgroundColor: lightGray },
+  agent: { textColor: white, backgroundColor: darkGray },
+};
+export const themesById = {
+  Light: {
+    chatHeader: {
+      backgroundColor: white,
+      textColor: darkGray,
+    },
+    chatPaneBackgroundColor: "rgba(255, 255, 255, 0.9)",
+    message: darkMessage,
+  },
+  Dark: {
+    chatHeader: {
+      backgroundColor: darkGray,
+      textColor: white,
+    },
+    chatPaneBackgroundColor: "rgba(32, 32, 32, 0.9)",
+    message: lightMessage,
+  },
+  Purple: {
+    chatHeader: {
+      backgroundColor: "#550098",
+      textColor: white,
+    },
+    chatPaneBackgroundColor: "rgba(85, 0, 152, 0.6)",
+    message: lightMessage,
+  },
+  Blue: {
+    chatHeader: {
+      backgroundColor: "#0814E5",
+      textColor: white,
+    },
+    chatPaneBackgroundColor: "rgba(4, 17, 245, 0.6)",
+    message: lightMessage,
+  },
+  Teal: {
+    chatHeader: {
+      backgroundColor: "#6EE7ED",
+      textColor: darkGray,
+    },
+    chatPaneBackgroundColor: "rgba(115, 247, 253, 0.8)",
+    message: darkMessage,
+  },
+  Green: {
+    chatHeader: {
+      backgroundColor: "#147B0E",
+      textColor: white,
+    },
+    chatPaneBackgroundColor: "rgba(13, 141, 5, 0.6)",
+    message: lightMessage,
+  },
+  Yellow: {
+    chatHeader: {
+      backgroundColor: "#F1E54F",
+      textColor: darkGray,
+    },
+    chatPaneBackgroundColor: "rgba(251, 239, 80, 0.9)",
+    message: darkMessage,
+  },
+  Orange: {
+    chatHeader: {
+      backgroundColor: "#C06C31",
+      textColor: white,
+    },
+    chatPaneBackgroundColor: "rgba(238, 126, 49, 0.7)",
+    message: lightMessage,
+  },
+  Pink: {
+    chatHeader: {
+      backgroundColor: "#A24599",
+      textColor: white,
+    },
+    chatPaneBackgroundColor: "rgba(167, 70, 157, 0.8)",
+    message: lightMessage,
+  },
+};

package/src/utils.ts

@@ -22,3 +22,6 @@ export function useInterval(callback: () => void, delay: number | null): void {
     return () => clearInterval(id);
   }, [delay]);
 }
+
+export const isMobile = (): boolean =>
+  window.matchMedia("(max-width: 767px)").matches;

package/public/ts-loader-build/ChatBubble.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-interface ChatBubbleProps {
-    messages: {
-        title: string;
-        text: string;
-    }[];
-    triggerBounce: () => void;
-    bounceIntervalInSeconds: number;
-    onClick: () => void;
-}
-declare const ChatBubble: React.FunctionComponent<ChatBubbleProps>;
-export default ChatBubble;

package/web-dev-server.config.js

@@ -1,21 +0,0 @@
-import { esbuildPlugin } from "@web/dev-server-esbuild";
-import { fromRollup } from "@web/dev-server-rollup";
-import rollupReplace from "@rollup/plugin-replace";
-
-const replace = fromRollup(rollupReplace);
-
-export default {
-  open: true,
-  nodeResolve: {
-    browser: true,
-  },
-  appIndex: "demo/index.html",
-  plugins: [
-    esbuildPlugin({ ts: true, tsx: true, target: "auto" }),
-    replace({
-      // setting "include" is important for performance
-      include: ["node_modules/react/index.js"],
-      "process.env.NODE_ENV": '"development"',
-    }),
-  ],
-};