@papercups-io/chat-widget - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/components/ChatWidget.d.ts

@@ -11,2 +11,3 @@ import React from 'react';
     title?: string;
+    subtitle?: string;
 };
@@ -24,2 +25,3 @@ declare type State = {
     componentDidMount(): void;
+    componentWillUnmount(): void;
     fetchLatestConversation: (customerId: string) => Promise<void>;
@@ -26,0 +28,0 @@ createNewCustomerId: (accountId: string) => Promise<any>;

dist/components/EmbeddableWidget.d.ts

 import React from 'react';
 declare type Props = {
     title?: string;
+    subtitle?: string;
+    primaryColor?: string;
     accountId: string;
 };
 declare type State = {
+    theme: any;
     open: boolean;
 };
 declare class EmbeddableWidget extends React.Component<Props, State> {
-    state: State;
-    componentDidMount(): void;
+    constructor(props: Props);
     handleToggleOpen: () => void;
@@ -13,0 +15,0 @@ render(): JSX.Element;

dist/index.js

@@ -10,2 +10,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 var request = _interopDefault(require('superagent'));
+var tinycolor = _interopDefault(require('tinycolor2'));
 
@@ -62,3 +63,3 @@ function _inheritsLoose(subClass, superClass) {
       sx: {
-        color: 'white',
+        color: 'background',
         bg: 'primary',
@@ -114,3 +115,3 @@ borderRadius: 4
       className = _ref.className;
-  return React.createElement("svg", {
+  return themeUi.jsx("svg", {
     focusable: 'false',
@@ -121,7 +122,9 @@ "aria-hidden": 'true',
     viewBox: '0 0 15 16',
-    fill: fill || 'black',
-    className: className
-  }, React.createElement("g", {
+    className: className,
+    sx: {
+      fill: fill || 'black'
+    }
+  }, themeUi.jsx("g", {
     transform: 'translate(-24.000000, -12.000000)'
-  }, React.createElement("path", {
+  }, themeUi.jsx("path", {
     d: 'M25.4036262,27.3409362 C24.4176893,27.8509036 23.8195834,27.3951055 24.0683403,26.3201996 L25.0887779,21.910776 C25.2131242,21.3734618 25.7510472,20.8884231 26.3078778,20.8254187 L32.503417,20.1244045 C34.151155,19.9379658 34.1569707,19.6389088 32.503417,19.4549971 L26.3078778,18.7659164 C25.7589338,18.7048617 25.2129433,18.217839 25.0887779,17.6798715 L24.0683403,13.2586546 C23.8198614,12.1820783 24.408944,11.7182276 25.4036262,12.2327184 L38.22304,18.8634497 C39.208977,19.373417 39.2177223,20.1957141 38.22304,20.7102049 L25.4036262,27.3409362 Z'
@@ -377,7 +380,14 @@ })));
 
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.channel && this.channel.leave();
+  };
+
   _proto.render = function render() {
     var _this2 = this;
 
-    var _this$props$title = this.props.title,
-        title = _this$props$title === void 0 ? 'Welcome!' : _this$props$title;
+    var _this$props = this.props,
+        _this$props$title = _this$props.title,
+        title = _this$props$title === void 0 ? 'Welcome!' : _this$props$title,
+        _this$props$subtitle = _this$props.subtitle,
+        subtitle = _this$props$subtitle === void 0 ? 'How can we help you?' : _this$props$subtitle;
     var _this$state2 = this.state,
@@ -404,3 +414,3 @@ customerId = _this$state2.customerId,
       sx: {
-        color: 'white',
+        color: 'background',
         my: 1
@@ -412,3 +422,3 @@ }
       }
-    }, "Ask us anything in the chat window below \uD83D\uDE0A")), React.createElement(themeUi.Box, {
+    }, subtitle)), React.createElement(themeUi.Box, {
       p: 3,
@@ -495,3 +505,3 @@ sx: {
       height: 16,
-      fill: 'white'
+      fill: 'background'
     }))))));
@@ -569,145 +579,155 @@ };
 
-var theme = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
-  fonts: {
-    body: '-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;',
-    heading: '-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;',
-    monospace: '"Roboto Mono", monospace'
-  },
-  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96],
-  fontWeights: {
-    body: 400,
-    heading: 600,
-    bold: 600
-  },
-  lineHeights: {
-    body: 1.5,
-    heading: 1.125
-  },
-  colors: {
-    text: '#141414',
-    background: '#fff',
-    primary: '#1890ff',
-    secondary: '#722ed1',
-    muted: '#f0f0f0',
-    gray: 'rgba(0, 0, 0, 0.45)',
-    input: 'rgba(0, 0, 0, 0.65)',
-    offset: 'rgba(255, 255, 255, 0.8)'
-  },
-  text: {
-    "default": {
-      color: 'text',
-      fontSize: 1
+var getThemeConfig = function getThemeConfig(settings) {
+  var _settings$primary = settings.primary,
+      primary = _settings$primary === void 0 ? '#1890ff' : _settings$primary;
+  var base = tinycolor(primary);
+  var overrides = {
+    primary: base.toString(),
+    light: base.lighten().toString(),
+    dark: base.darken().toString()
+  };
+  return {
+    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+    fonts: {
+      body: '-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;',
+      heading: '-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;',
+      monospace: '"Roboto Mono", monospace'
     },
-    caps: {
-      textTransform: 'uppercase',
-      letterSpacing: '0.2em'
+    fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96],
+    fontWeights: {
+      body: 400,
+      heading: 600,
+      bold: 600
     },
-    heading: {
-      fontFamily: 'heading',
-      fontWeight: 'heading',
-      lineHeight: 'heading'
-    }
-  },
-  buttons: {
-    primary: {
-      cursor: 'pointer',
-      outline: 0,
-      transition: '0.2s',
-      '&:hover': {
-        background: '#40a9ff',
-        borderColor: '#40a9ff'
+    lineHeights: {
+      body: 1.5,
+      heading: 1.125
+    },
+    colors: {
+      text: '#141414',
+      background: '#fff',
+      primary: overrides.primary,
+      secondary: '#722ed1',
+      muted: '#f0f0f0',
+      gray: 'rgba(0, 0, 0, 0.45)',
+      input: 'rgba(0, 0, 0, 0.65)',
+      offset: 'rgba(255, 255, 255, 0.8)'
+    },
+    text: {
+      "default": {
+        color: 'text',
+        fontSize: 1
       },
-      '&:active': {
-        background: '#096dd9',
-        borderColor: '#096dd9'
+      caps: {
+        textTransform: 'uppercase',
+        letterSpacing: '0.2em'
+      },
+      heading: {
+        fontFamily: 'heading',
+        fontWeight: 'heading',
+        lineHeight: 'heading'
       }
-    }
-  },
-  styles: {
-    root: {
-      fontFamily: 'body',
-      lineHeight: 'body',
-      fontWeight: 'body',
-      fontSize: 1
     },
-    h1: {
-      color: 'text',
-      fontFamily: 'heading',
-      lineHeight: 'heading',
-      fontWeight: 'heading',
-      fontSize: 5
+    buttons: {
+      primary: {
+        cursor: 'pointer',
+        outline: 0,
+        transition: '0.2s',
+        '&:hover': {
+          background: overrides.light,
+          borderColor: overrides.light
+        },
+        '&:active': {
+          background: overrides.dark,
+          borderColor: overrides.dark
+        }
+      }
     },
-    h2: {
-      color: 'text',
-      fontFamily: 'heading',
-      lineHeight: 'heading',
-      fontWeight: 'heading',
-      fontSize: 4
-    },
-    h3: {
-      color: 'text',
-      fontFamily: 'heading',
-      lineHeight: 'heading',
-      fontWeight: 'heading',
-      fontSize: 3
-    },
-    h4: {
-      color: 'text',
-      fontFamily: 'heading',
-      lineHeight: 'heading',
-      fontWeight: 'heading',
-      fontSize: 2
-    },
-    h5: {
-      color: 'text',
-      fontFamily: 'heading',
-      lineHeight: 'heading',
-      fontWeight: 'heading',
-      fontSize: 1
-    },
-    h6: {
-      color: 'text',
-      fontFamily: 'heading',
-      lineHeight: 'heading',
-      fontWeight: 'heading',
-      fontSize: 0
-    },
-    p: {
-      color: 'text',
-      fontFamily: 'body',
-      fontWeight: 'body',
-      lineHeight: 'body'
-    },
-    a: {
-      color: 'primary'
-    },
-    pre: {
-      fontFamily: 'monospace',
-      overflowX: 'auto',
+    styles: {
+      root: {
+        fontFamily: 'body',
+        lineHeight: 'body',
+        fontWeight: 'body',
+        fontSize: 1
+      },
+      h1: {
+        color: 'text',
+        fontFamily: 'heading',
+        lineHeight: 'heading',
+        fontWeight: 'heading',
+        fontSize: 5
+      },
+      h2: {
+        color: 'text',
+        fontFamily: 'heading',
+        lineHeight: 'heading',
+        fontWeight: 'heading',
+        fontSize: 4
+      },
+      h3: {
+        color: 'text',
+        fontFamily: 'heading',
+        lineHeight: 'heading',
+        fontWeight: 'heading',
+        fontSize: 3
+      },
+      h4: {
+        color: 'text',
+        fontFamily: 'heading',
+        lineHeight: 'heading',
+        fontWeight: 'heading',
+        fontSize: 2
+      },
+      h5: {
+        color: 'text',
+        fontFamily: 'heading',
+        lineHeight: 'heading',
+        fontWeight: 'heading',
+        fontSize: 1
+      },
+      h6: {
+        color: 'text',
+        fontFamily: 'heading',
+        lineHeight: 'heading',
+        fontWeight: 'heading',
+        fontSize: 0
+      },
+      p: {
+        color: 'text',
+        fontFamily: 'body',
+        fontWeight: 'body',
+        lineHeight: 'body'
+      },
+      a: {
+        color: 'primary'
+      },
+      pre: {
+        fontFamily: 'monospace',
+        overflowX: 'auto',
+        code: {
+          color: 'inherit'
+        }
+      },
       code: {
-        color: 'inherit'
+        fontFamily: 'monospace',
+        fontSize: 'inherit'
+      },
+      table: {
+        width: '100%',
+        borderCollapse: 'separate',
+        borderSpacing: 0
+      },
+      th: {
+        textAlign: 'left',
+        borderBottomStyle: 'solid'
+      },
+      td: {
+        textAlign: 'left',
+        borderBottomStyle: 'solid'
+      },
+      img: {
+        maxWidth: '100%'
       }
-    },
-    code: {
-      fontFamily: 'monospace',
-      fontSize: 'inherit'
-    },
-    table: {
-      width: '100%',
-      borderCollapse: 'separate',
-      borderSpacing: 0
-    },
-    th: {
-      textAlign: 'left',
-      borderBottomStyle: 'solid'
-    },
-    td: {
-      textAlign: 'left',
-      borderBottomStyle: 'solid'
-    },
-    img: {
-      maxWidth: '100%'
     }
-  }
+  };
 };
@@ -718,9 +738,6 @@
 
-  function EmbeddableWidget() {
+  function EmbeddableWidget(props) {
     var _this;
 
-    _this = _React$Component.apply(this, arguments) || this;
-    _this.state = {
-      open: false
-    };
+    _this = _React$Component.call(this, props) || this;
 
@@ -733,2 +750,8 @@ _this.handleToggleOpen = function () {
 
+    _this.state = {
+      theme: getThemeConfig({
+        primary: props.primaryColor
+      }),
+      open: false
+    };
     return _this;
@@ -739,6 +762,6 @@ }
 
-  _proto.componentDidMount = function componentDidMount() {};
-
   _proto.render = function render() {
-    var open = this.state.open;
+    var _this$state = this.state,
+        theme = _this$state.theme,
+        open = _this$state.open;
     return React.createElement(themeUi.ThemeProvider, {
@@ -775,2 +798,3 @@ theme: theme
       title: this.props.title,
+      subtitle: this.props.subtitle,
       accountId: this.props.accountId
@@ -777,0 +801,0 @@ })), React.createElement(framerMotion.motion.div, {

dist/index.modern.js

 import React from 'react';
 import { motion } from 'framer-motion';
-import { Box, Flex, Text, Heading, Textarea, Button, ThemeProvider } from 'theme-ui';
+import { Box, Flex, Text, jsx, Heading, Textarea, Button, ThemeProvider } from 'theme-ui';
 import { Socket } from 'phoenix';
@@ -8,2 +8,3 @@ import dayjs from 'dayjs';
 import request from 'superagent';
+import tinycolor from 'tinycolor2';
 
@@ -60,3 +61,3 @@ function _inheritsLoose(subClass, superClass) {
       sx: {
-        color: 'white',
+        color: 'background',
         bg: 'primary',
@@ -112,3 +113,3 @@ borderRadius: 4
       className = _ref.className;
-  return React.createElement("svg", {
+  return jsx("svg", {
     focusable: 'false',
@@ -119,7 +120,9 @@ "aria-hidden": 'true',
     viewBox: '0 0 15 16',
-    fill: fill || 'black',
-    className: className
-  }, React.createElement("g", {
+    className: className,
+    sx: {
+      fill: fill || 'black'
+    }
+  }, jsx("g", {
     transform: 'translate(-24.000000, -12.000000)'
-  }, React.createElement("path", {
+  }, jsx("path", {
     d: 'M25.4036262,27.3409362 C24.4176893,27.8509036 23.8195834,27.3951055 24.0683403,26.3201996 L25.0887779,21.910776 C25.2131242,21.3734618 25.7510472,20.8884231 26.3078778,20.8254187 L32.503417,20.1244045 C34.151155,19.9379658 34.1569707,19.6389088 32.503417,19.4549971 L26.3078778,18.7659164 C25.7589338,18.7048617 25.2129433,18.217839 25.0887779,17.6798715 L24.0683403,13.2586546 C23.8198614,12.1820783 24.408944,11.7182276 25.4036262,12.2327184 L38.22304,18.8634497 C39.208977,19.373417 39.2177223,20.1957141 38.22304,20.7102049 L25.4036262,27.3409362 Z'
@@ -375,7 +378,14 @@ })));
 
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.channel && this.channel.leave();
+  };
+
   _proto.render = function render() {
     var _this2 = this;
 
-    var _this$props$title = this.props.title,
-        title = _this$props$title === void 0 ? 'Welcome!' : _this$props$title;
+    var _this$props = this.props,
+        _this$props$title = _this$props.title,
+        title = _this$props$title === void 0 ? 'Welcome!' : _this$props$title,
+        _this$props$subtitle = _this$props.subtitle,
+        subtitle = _this$props$subtitle === void 0 ? 'How can we help you?' : _this$props$subtitle;
     var _this$state2 = this.state,
@@ -402,3 +412,3 @@ customerId = _this$state2.customerId,
       sx: {
-        color: 'white',
+        color: 'background',
         my: 1
@@ -410,3 +420,3 @@ }
       }
-    }, "Ask us anything in the chat window below \uD83D\uDE0A")), React.createElement(Box, {
+    }, subtitle)), React.createElement(Box, {
       p: 3,
@@ -493,3 +503,3 @@ sx: {
       height: 16,
-      fill: 'white'
+      fill: 'background'
     }))))));
@@ -567,145 +577,155 @@ };
 
-var theme = {
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
-  fonts: {
-    body: '-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;',
-    heading: '-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;',
-    monospace: '"Roboto Mono", monospace'
-  },
-  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96],
-  fontWeights: {
-    body: 400,
-    heading: 600,
-    bold: 600
-  },
-  lineHeights: {
-    body: 1.5,
-    heading: 1.125
-  },
-  colors: {
-    text: '#141414',
-    background: '#fff',
-    primary: '#1890ff',
-    secondary: '#722ed1',
-    muted: '#f0f0f0',
-    gray: 'rgba(0, 0, 0, 0.45)',
-    input: 'rgba(0, 0, 0, 0.65)',
-    offset: 'rgba(255, 255, 255, 0.8)'
-  },
-  text: {
-    "default": {
-      color: 'text',
-      fontSize: 1
+var getThemeConfig = function getThemeConfig(settings) {
+  var _settings$primary = settings.primary,
+      primary = _settings$primary === void 0 ? '#1890ff' : _settings$primary;
+  var base = tinycolor(primary);
+  var overrides = {
+    primary: base.toString(),
+    light: base.lighten().toString(),
+    dark: base.darken().toString()
+  };
+  return {
+    space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+    fonts: {
+      body: '-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;',
+      heading: '-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;',
+      monospace: '"Roboto Mono", monospace'
     },
-    caps: {
-      textTransform: 'uppercase',
-      letterSpacing: '0.2em'
+    fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96],
+    fontWeights: {
+      body: 400,
+      heading: 600,
+      bold: 600
     },
-    heading: {
-      fontFamily: 'heading',
-      fontWeight: 'heading',
-      lineHeight: 'heading'
-    }
-  },
-  buttons: {
-    primary: {
-      cursor: 'pointer',
-      outline: 0,
-      transition: '0.2s',
-      '&:hover': {
-        background: '#40a9ff',
-        borderColor: '#40a9ff'
+    lineHeights: {
+      body: 1.5,
+      heading: 1.125
+    },
+    colors: {
+      text: '#141414',
+      background: '#fff',
+      primary: overrides.primary,
+      secondary: '#722ed1',
+      muted: '#f0f0f0',
+      gray: 'rgba(0, 0, 0, 0.45)',
+      input: 'rgba(0, 0, 0, 0.65)',
+      offset: 'rgba(255, 255, 255, 0.8)'
+    },
+    text: {
+      "default": {
+        color: 'text',
+        fontSize: 1
       },
-      '&:active': {
-        background: '#096dd9',
-        borderColor: '#096dd9'
+      caps: {
+        textTransform: 'uppercase',
+        letterSpacing: '0.2em'
+      },
+      heading: {
+        fontFamily: 'heading',
+        fontWeight: 'heading',
+        lineHeight: 'heading'
       }
-    }
-  },
-  styles: {
-    root: {
-      fontFamily: 'body',
-      lineHeight: 'body',
-      fontWeight: 'body',
-      fontSize: 1
     },
-    h1: {
-      color: 'text',
-      fontFamily: 'heading',
-      lineHeight: 'heading',
-      fontWeight: 'heading',
-      fontSize: 5
+    buttons: {
+      primary: {
+        cursor: 'pointer',
+        outline: 0,
+        transition: '0.2s',
+        '&:hover': {
+          background: overrides.light,
+          borderColor: overrides.light
+        },
+        '&:active': {
+          background: overrides.dark,
+          borderColor: overrides.dark
+        }
+      }
     },
-    h2: {
-      color: 'text',
-      fontFamily: 'heading',
-      lineHeight: 'heading',
-      fontWeight: 'heading',
-      fontSize: 4
-    },
-    h3: {
-      color: 'text',
-      fontFamily: 'heading',
-      lineHeight: 'heading',
-      fontWeight: 'heading',
-      fontSize: 3
-    },
-    h4: {
-      color: 'text',
-      fontFamily: 'heading',
-      lineHeight: 'heading',
-      fontWeight: 'heading',
-      fontSize: 2
-    },
-    h5: {
-      color: 'text',
-      fontFamily: 'heading',
-      lineHeight: 'heading',
-      fontWeight: 'heading',
-      fontSize: 1
-    },
-    h6: {
-      color: 'text',
-      fontFamily: 'heading',
-      lineHeight: 'heading',
-      fontWeight: 'heading',
-      fontSize: 0
-    },
-    p: {
-      color: 'text',
-      fontFamily: 'body',
-      fontWeight: 'body',
-      lineHeight: 'body'
-    },
-    a: {
-      color: 'primary'
-    },
-    pre: {
-      fontFamily: 'monospace',
-      overflowX: 'auto',
+    styles: {
+      root: {
+        fontFamily: 'body',
+        lineHeight: 'body',
+        fontWeight: 'body',
+        fontSize: 1
+      },
+      h1: {
+        color: 'text',
+        fontFamily: 'heading',
+        lineHeight: 'heading',
+        fontWeight: 'heading',
+        fontSize: 5
+      },
+      h2: {
+        color: 'text',
+        fontFamily: 'heading',
+        lineHeight: 'heading',
+        fontWeight: 'heading',
+        fontSize: 4
+      },
+      h3: {
+        color: 'text',
+        fontFamily: 'heading',
+        lineHeight: 'heading',
+        fontWeight: 'heading',
+        fontSize: 3
+      },
+      h4: {
+        color: 'text',
+        fontFamily: 'heading',
+        lineHeight: 'heading',
+        fontWeight: 'heading',
+        fontSize: 2
+      },
+      h5: {
+        color: 'text',
+        fontFamily: 'heading',
+        lineHeight: 'heading',
+        fontWeight: 'heading',
+        fontSize: 1
+      },
+      h6: {
+        color: 'text',
+        fontFamily: 'heading',
+        lineHeight: 'heading',
+        fontWeight: 'heading',
+        fontSize: 0
+      },
+      p: {
+        color: 'text',
+        fontFamily: 'body',
+        fontWeight: 'body',
+        lineHeight: 'body'
+      },
+      a: {
+        color: 'primary'
+      },
+      pre: {
+        fontFamily: 'monospace',
+        overflowX: 'auto',
+        code: {
+          color: 'inherit'
+        }
+      },
       code: {
-        color: 'inherit'
+        fontFamily: 'monospace',
+        fontSize: 'inherit'
+      },
+      table: {
+        width: '100%',
+        borderCollapse: 'separate',
+        borderSpacing: 0
+      },
+      th: {
+        textAlign: 'left',
+        borderBottomStyle: 'solid'
+      },
+      td: {
+        textAlign: 'left',
+        borderBottomStyle: 'solid'
+      },
+      img: {
+        maxWidth: '100%'
       }
-    },
-    code: {
-      fontFamily: 'monospace',
-      fontSize: 'inherit'
-    },
-    table: {
-      width: '100%',
-      borderCollapse: 'separate',
-      borderSpacing: 0
-    },
-    th: {
-      textAlign: 'left',
-      borderBottomStyle: 'solid'
-    },
-    td: {
-      textAlign: 'left',
-      borderBottomStyle: 'solid'
-    },
-    img: {
-      maxWidth: '100%'
     }
-  }
+  };
 };
@@ -716,9 +736,6 @@
 
-  function EmbeddableWidget() {
+  function EmbeddableWidget(props) {
     var _this;
 
-    _this = _React$Component.apply(this, arguments) || this;
-    _this.state = {
-      open: false
-    };
+    _this = _React$Component.call(this, props) || this;
 
@@ -731,2 +748,8 @@ _this.handleToggleOpen = function () {
 
+    _this.state = {
+      theme: getThemeConfig({
+        primary: props.primaryColor
+      }),
+      open: false
+    };
     return _this;
@@ -737,6 +760,6 @@ }
 
-  _proto.componentDidMount = function componentDidMount() {};
-
   _proto.render = function render() {
-    var open = this.state.open;
+    var _this$state = this.state,
+        theme = _this$state.theme,
+        open = _this$state.open;
     return React.createElement(ThemeProvider, {
@@ -773,2 +796,3 @@ theme: theme
       title: this.props.title,
+      subtitle: this.props.subtitle,
       accountId: this.props.accountId
@@ -775,0 +799,0 @@ })), React.createElement(motion.div, {

dist/theme.d.ts

@@ -1,2 +0,5 @@
-export declare const theme: {
+declare type ThemeSettings = {
+    primary?: string;
+};
+export declare const getThemeConfig: (settings: ThemeSettings) => {
     space: number[];
@@ -145,2 +148,2 @@ fonts: {
 };
-export default theme;
+export default getThemeConfig;

package.json

 {
   "name": "@papercups-io/chat-widget",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Papercups chat widget",
@@ -40,2 +40,3 @@ "author": "reichert621",
     "@types/theme-ui": "^0.3.5",
+    "@types/tinycolor2": "^1.4.2",
     "@typescript-eslint/eslint-plugin": "^2.26.0",
@@ -72,4 +73,5 @@ "@typescript-eslint/parser": "^2.26.0",
     "superagent": "^5.3.1",
-    "theme-ui": "^0.3.1"
+    "theme-ui": "^0.3.1",
+    "tinycolor2": "^1.4.1"
   }
 }

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

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

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

Improved metrics

Total package byte prevSize

157872

increased by3.9%

Lines of code

2439

increased by2.31%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

7

increased by16.67%

Dev dependency count

33

increased by3.13%

Dependency changes

• + Addedtinycolor2@^1.4.1

• + Addedtinycolor2@1.6.0(transitive)