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

Comparing version 1.0.12 to 1.0.15

dist/components/ChatWindow.d.ts

@@ -17,2 +17,3 @@ import React from 'react';
     conversationId: string | null;
+    isSending: boolean;
 };
@@ -19,0 +20,0 @@ declare class ChatWindow extends React.Component<Props, State> {

dist/components/WidgetToggle.d.ts

 /// <reference types="react" />
-export declare const WidgetToggle: ({ open, toggle, }: {
-    open: boolean;
+export declare const WidgetToggle: ({ toggle }: {
     toggle: () => void;
 }) => JSX.Element;
 export default WidgetToggle;

dist/index.js

@@ -386,3 +386,4 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
       customerId: getCustomerId(),
-      conversationId: null
+      conversationId: null,
+      isSending: false
     };
@@ -564,2 +565,6 @@
           if (!_this.channel) {
+            _this.setState({
+              isSending: false
+            });
+
             return;
@@ -574,3 +579,4 @@ }
           _this.setState({
-            message: ''
+            message: '',
+            isSending: false
           });
@@ -583,8 +589,13 @@ };
             customerId = _this$state.customerId,
-            conversationId = _this$state.conversationId;
+            conversationId = _this$state.conversationId,
+            isSending = _this$state.isSending;
 
-        if (!message || message.trim().length === 0) {
+        if (isSending || !message || message.trim().length === 0) {
           return Promise.resolve();
         }
 
+        _this.setState({
+          isSending: true
+        });
+
         var _temp6 = function () {
@@ -630,3 +641,4 @@ if (!customerId || !conversationId) {
         _this$state2$messages = _this$state2.messages,
-        messages = _this$state2$messages === void 0 ? [] : _this$state2$messages;
+        messages = _this$state2$messages === void 0 ? [] : _this$state2$messages,
+        isSending = _this$state2.isSending;
     return React.createElement(themeUi.Flex, {
@@ -647,2 +659,3 @@ sx: {
       as: 'h2',
+      className: 'Papercups-heading',
       sx: {
@@ -726,2 +739,3 @@ color: 'background',
       type: 'submit',
+      disabled: isSending,
       onClick: this.handleSendMessage,
@@ -741,3 +755,7 @@ sx: {
       fill: 'background'
-    }))))));
+    }))))), React.createElement("img", {
+      src: 'https://papercups.s3.us-east-2.amazonaws.com/papercups-logo.svg',
+      width: '0',
+      height: '0'
+    }));
   };
@@ -758,4 +776,3 @@
 var WidgetToggle = function WidgetToggle(_ref) {
-  var open = _ref.open,
-      toggle = _ref.toggle;
+  var toggle = _ref.toggle;
   return React.createElement(themeUi.Flex, {
@@ -769,7 +786,6 @@ sx: {
   }, React.createElement(themeUi.Button, {
+    className: 'Papercups-toggleButton',
     p: 0,
     sx: {
       bg: 'primary',
-      pt: '2px',
-      pl: open ? '2px' : 0,
       variant: 'styles.WidgetToggle'
@@ -779,35 +795,45 @@ },
   }, React.createElement("svg", {
-    width: '23',
-    height: '23',
-    viewBox: '0 0 23 23'
+    width: '27',
+    height: '27',
+    viewBox: '0 0 27 27'
   }, React.createElement(Path, {
     variants: {
       closed: {
-        d: 'M 2 2.5 L 20 2.5'
+        opacity: 0,
+        d: 'M 7.5 14.5 L 19 14.5'
       },
       open: {
-        d: 'M 3 16.5 L 17 2.5'
+        opacity: 1,
+        d: 'M 7 7 L 20 20'
       }
+    },
+    transition: {
+      duration: 0.2
     }
   }), React.createElement(Path, {
-    d: 'M 2 9.423 L 20 9.423',
     variants: {
       closed: {
-        opacity: 1
+        opacity: 0,
+        d: 'M 7.5 8.5 L 19 8.5'
       },
       open: {
-        opacity: 0
+        opacity: 1,
+        d: 'M 7 20 L 20 7'
       }
     },
     transition: {
-      duration: 0.1
+      duration: 0.2
     }
   }), React.createElement(Path, {
+    d: 'M22 21.6453C22 20 23 19.5 23 19.5C23 19.5 25.5 18 25.5 14V9C25.5 4 23 1.5 18 1.5H9C4 1.5 1.5 4 1.5 9V14C1.5 19 4 21 9 21H13.5C14 21 14 21 15 21.5L20.25 24.8572L20.8517 25.2118C21.5184 25.6046 22 25.631 22 24.8572V24.0287V22.7858V21.6453Z',
     variants: {
       closed: {
-        d: 'M 2 16.346 L 20 16.346'
+        opacity: 1
       },
       open: {
-        d: 'M 3 2.5 L 17 16.346'
+        opacity: 0
       }
+    },
+    transition: {
+      duration: 0.2
     }
@@ -1010,2 +1036,8 @@ }))));
       },
+      WidgetToggleContainer: {
+        position: 'fixed',
+        zIndex: 2147483003,
+        bottom: '20px',
+        right: '20px'
+      },
       WidgetToggle: {
@@ -1053,2 +1085,3 @@ outline: 'none',
   }, isOpen && themeUi.jsx(framerMotion.motion.div, {
+    className: 'Papercups-chatWindowContainer',
     initial: {
@@ -1077,12 +1110,9 @@ opacity: 0,
   })), themeUi.jsx(framerMotion.motion.div, {
+    className: 'Papercups-toggleButtonContainer',
     initial: false,
     animate: isOpen ? 'open' : 'closed',
-    style: {
-      position: 'fixed',
-      zIndex: 2147483003,
-      bottom: '20px',
-      right: '20px'
+    sx: {
+      variant: 'styles.WidgetToggleContainer'
     }
   }, themeUi.jsx(WidgetToggle, {
-    open: isOpen,
     toggle: handleToggleOpen
@@ -1089,0 +1119,0 @@ })));

dist/index.modern.js

@@ -384,3 +384,4 @@ import React from 'react';
       customerId: getCustomerId(),
-      conversationId: null
+      conversationId: null,
+      isSending: false
     };
@@ -562,2 +563,6 @@
           if (!_this.channel) {
+            _this.setState({
+              isSending: false
+            });
+
             return;
@@ -572,3 +577,4 @@ }
           _this.setState({
-            message: ''
+            message: '',
+            isSending: false
           });
@@ -581,8 +587,13 @@ };
             customerId = _this$state.customerId,
-            conversationId = _this$state.conversationId;
+            conversationId = _this$state.conversationId,
+            isSending = _this$state.isSending;
 
-        if (!message || message.trim().length === 0) {
+        if (isSending || !message || message.trim().length === 0) {
           return Promise.resolve();
         }
 
+        _this.setState({
+          isSending: true
+        });
+
         var _temp6 = function () {
@@ -628,3 +639,4 @@ if (!customerId || !conversationId) {
         _this$state2$messages = _this$state2.messages,
-        messages = _this$state2$messages === void 0 ? [] : _this$state2$messages;
+        messages = _this$state2$messages === void 0 ? [] : _this$state2$messages,
+        isSending = _this$state2.isSending;
     return React.createElement(Flex, {
@@ -645,2 +657,3 @@ sx: {
       as: 'h2',
+      className: 'Papercups-heading',
       sx: {
@@ -724,2 +737,3 @@ color: 'background',
       type: 'submit',
+      disabled: isSending,
       onClick: this.handleSendMessage,
@@ -739,3 +753,7 @@ sx: {
       fill: 'background'
-    }))))));
+    }))))), React.createElement("img", {
+      src: 'https://papercups.s3.us-east-2.amazonaws.com/papercups-logo.svg',
+      width: '0',
+      height: '0'
+    }));
   };
@@ -756,4 +774,3 @@
 var WidgetToggle = function WidgetToggle(_ref) {
-  var open = _ref.open,
-      toggle = _ref.toggle;
+  var toggle = _ref.toggle;
   return React.createElement(Flex, {
@@ -767,7 +784,6 @@ sx: {
   }, React.createElement(Button, {
+    className: 'Papercups-toggleButton',
     p: 0,
     sx: {
       bg: 'primary',
-      pt: '2px',
-      pl: open ? '2px' : 0,
       variant: 'styles.WidgetToggle'
@@ -777,35 +793,45 @@ },
   }, React.createElement("svg", {
-    width: '23',
-    height: '23',
-    viewBox: '0 0 23 23'
+    width: '27',
+    height: '27',
+    viewBox: '0 0 27 27'
   }, React.createElement(Path, {
     variants: {
       closed: {
-        d: 'M 2 2.5 L 20 2.5'
+        opacity: 0,
+        d: 'M 7.5 14.5 L 19 14.5'
       },
       open: {
-        d: 'M 3 16.5 L 17 2.5'
+        opacity: 1,
+        d: 'M 7 7 L 20 20'
       }
+    },
+    transition: {
+      duration: 0.2
     }
   }), React.createElement(Path, {
-    d: 'M 2 9.423 L 20 9.423',
     variants: {
       closed: {
-        opacity: 1
+        opacity: 0,
+        d: 'M 7.5 8.5 L 19 8.5'
       },
       open: {
-        opacity: 0
+        opacity: 1,
+        d: 'M 7 20 L 20 7'
       }
     },
     transition: {
-      duration: 0.1
+      duration: 0.2
     }
   }), React.createElement(Path, {
+    d: 'M22 21.6453C22 20 23 19.5 23 19.5C23 19.5 25.5 18 25.5 14V9C25.5 4 23 1.5 18 1.5H9C4 1.5 1.5 4 1.5 9V14C1.5 19 4 21 9 21H13.5C14 21 14 21 15 21.5L20.25 24.8572L20.8517 25.2118C21.5184 25.6046 22 25.631 22 24.8572V24.0287V22.7858V21.6453Z',
     variants: {
       closed: {
-        d: 'M 2 16.346 L 20 16.346'
+        opacity: 1
       },
       open: {
-        d: 'M 3 2.5 L 17 16.346'
+        opacity: 0
       }
+    },
+    transition: {
+      duration: 0.2
     }
@@ -1008,2 +1034,8 @@ }))));
       },
+      WidgetToggleContainer: {
+        position: 'fixed',
+        zIndex: 2147483003,
+        bottom: '20px',
+        right: '20px'
+      },
       WidgetToggle: {
@@ -1051,2 +1083,3 @@ outline: 'none',
   }, isOpen && jsx(motion.div, {
+    className: 'Papercups-chatWindowContainer',
     initial: {
@@ -1075,12 +1108,9 @@ opacity: 0,
   })), jsx(motion.div, {
+    className: 'Papercups-toggleButtonContainer',
     initial: false,
     animate: isOpen ? 'open' : 'closed',
-    style: {
-      position: 'fixed',
-      zIndex: 2147483003,
-      bottom: '20px',
-      right: '20px'
+    sx: {
+      variant: 'styles.WidgetToggleContainer'
     }
   }, jsx(WidgetToggle, {
-    open: isOpen,
     toggle: handleToggleOpen
@@ -1087,0 +1117,0 @@ })));

dist/theme.d.ts

@@ -188,2 +188,8 @@ declare type ThemeSettings = {
         };
+        WidgetToggleContainer: {
+            position: string;
+            zIndex: number;
+            bottom: string;
+            right: string;
+        };
         WidgetToggle: {
@@ -190,0 +196,0 @@ outline: string;

package.json

 {
   "name": "@papercups-io/chat-widget",
-  "version": "1.0.12",
+  "version": "1.0.15",
   "description": "Papercups chat widget",
@@ -5,0 +5,0 @@ "author": "reichert621",

No alert changes

Improved metrics

Total package byte prevSize

253807

increased by2.17%

Lines of code

3104

increased by2.04%

No dependency changes