@subiz/widget-v4 4.1.119 → 4.1.120

package/assets/less/widget.less

@@ -248,7 +248,9 @@
 
 .btn--start-convo {
 	border-radius: 7px;
-	display: block;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	padding-left: 32px;
 	padding-right: 32px;
 	height: 40px;
@@ -306,7 +308,6 @@
 }
 
 .poweredby {
-	margin-top: @spacer3;
 	margin-bottom: @spacer2;
 	text-align: center;
 

package/compiled_src/chatbox/Event.js

@@ -155,7 +155,22 @@ class Event extends _common.Com {
     });
   }
   renderTyping() {
-    let innercls = 'agent-convo-event-inner';
+    if (!this.props.event.is_show) {
+      return (0, _preact.h)("div", {
+        key: 'container',
+        class: "convo-event agent-message",
+        style: "opacity: 0 !important"
+      }, (0, _preact.h)("div", {
+        class: "agent-convo-event-wrapper"
+      }, (0, _preact.h)("div", {
+        class: "agent-convo-event-inner"
+      }, (0, _preact.h)("div", {
+        class: "message-agent message-text--agent",
+        style: "opacity: 0.6 !important"
+      }, (0, _preact.h)("div", {
+        style: "height: 20px !important; width: 35px !important"
+      })))));
+    }
     var html = `
 <html>
   <head>
@@ -204,14 +219,15 @@ class Event extends _common.Com {
 `;
     let src = 'data:text/html,' + encodeURIComponent(html);
     return (0, _preact.h)("div", {
-      class: "convo-event agent-message"
+      key: 'container',
+      class: "convo-event agent-message",
+      style: "opacity: 0.6 !important"
     }, (0, _preact.h)("div", {
       class: "agent-convo-event-wrapper"
     }, (0, _preact.h)("div", {
-      class: innercls
+      class: "agent-convo-event-inner"
     }, (0, _preact.h)("div", {
-      class: "message-agent message-text--agent",
-      style: "opacity: 0.6 !important"
+      class: "message-agent message-text--agent"
     }, (0, _preact.h)("iframe", {
       src: src,
       style: "width: 35px !important; height: 20px !important; display: block !important; overflow: hidden !important; padding: 0 !important "
@@ -298,6 +314,9 @@ class Event extends _common.Com {
       });
     }
     let $sender = null;
+    if (this.props.event.mode === 'lead') $sender = (0, _preact.h)("div", {
+      class: "pt-2"
+    });
     let $error = null;
     if (ev._error && ev.type === 'message_sent') {
       let msg = this.props.t('error_send_message');

package/compiled_src/chatbox/Events.js

@@ -106,33 +106,31 @@ class Events extends _common.Com {
     events = _index.default.map(events, ev => ({
       ev: ev
     }));
-    if (this.state.isShowTyping) {
-      let ev = this.state.typing_event || {
-        id: 'evzz' + _index.default.Date.now(),
-        created: _index.default.Date.now(),
-        by: {
-          type: 'agent'
-        }
-      };
-      let fakeev = {
-        is_typing: true,
+    let ev = this.state.typing_event || {
+      id: 'evzz' + _index.default.Date.now(),
+      created: _index.default.Date.now(),
+      by: {
+        type: 'agent'
+      }
+    };
+    let fakeev = {
+      is_typing: true,
+      is_show: this.state.isShowTyping,
+      id: ev.id,
+      ev: {
         id: ev.id,
-        ev: {
-          id: ev.id,
-          created: ev.created,
-          by: ev.by,
-          type: 'message_sent',
-          data: {
-            message: {
-              text: '...',
-              conversation_id: this.props.cid
-            }
+        created: ev.created,
+        by: ev.by,
+        type: 'message_sent',
+        data: {
+          message: {
+            text: '...',
+            conversation_id: this.props.cid
           }
         }
-      };
-      console.log('FA', fakeev);
-      events.push(fakeev);
-    }
+      }
+    };
+    events.push(fakeev);
     processEvents(convo, events);
     let $events = _index.default.map(events, ev => {
       let isLast = ev.ev.id === _index.default.get(convo, 'last_message_sent.id');

package/compiled_src/chatbox/Widget.js

@@ -652,7 +652,9 @@ class Widget extends _common.Com {
       class: "flex-grow-1"
     }, (0, _preact.h)("div", {
       class: "form mt-3 pl-3 pr-3 pt-3 pb-3 d-flex flex-column"
-    }, (0, _preact.h)("div", null, title), this.renderFields(form, formName))), (0, _preact.h)(_PoweredBy.default, {
+    }, (0, _preact.h)("div", null, title), this.renderFields(form, formName))), (0, _preact.h)("div", {
+      class: "mt-2"
+    }), (0, _preact.h)(_PoweredBy.default, {
       store: this.props.store,
       t: this.props.t
     })), (0, _preact.h)("div", {
@@ -724,7 +726,9 @@ class Widget extends _common.Com {
       alt: "send button",
       width: "26",
       height: "26"
-    })), (0, _preact.h)(_PoweredBy.default, {
+    })), (0, _preact.h)("div", {
+      class: "mt-2"
+    }), (0, _preact.h)(_PoweredBy.default, {
       store: this.props.store
     })));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.119",
+	"version": "4.1.120",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",

package/src/chatbox/Event.js

@@ -153,7 +153,20 @@ export default class Event extends Com {
 	}
 
 	renderTyping() {
-		let innercls = 'agent-convo-event-inner'
+		if (!this.props.event.is_show) {
+			return (
+				<div key={'container'} class='convo-event agent-message' style='opacity: 0 !important'>
+					<div class='agent-convo-event-wrapper'>
+						<div class='agent-convo-event-inner'>
+							<div class='message-agent message-text--agent' style='opacity: 0.6 !important'>
+								<div style='height: 20px !important; width: 35px !important'></div>
+							</div>
+						</div>
+					</div>
+				</div>
+			)
+		}
+
 		var html = `
 <html>
   <head>
@@ -202,10 +215,10 @@ export default class Event extends Com {
 `
 		let src = 'data:text/html,' + encodeURIComponent(html)
 		return (
-			<div class='convo-event agent-message'>
+			<div key={'container'} class='convo-event agent-message' style='opacity: 0.6 !important'>
 				<div class='agent-convo-event-wrapper'>
-					<div class={innercls}>
-						<div class='message-agent message-text--agent' style='opacity: 0.6 !important'>
+					<div class='agent-convo-event-inner'>
+						<div class='message-agent message-text--agent'>
 							<iframe
 								src={src}
 								style='width: 35px !important; height: 20px !important; display: block !important; overflow: hidden !important; padding: 0 !important '
@@ -286,7 +299,7 @@ export default class Event extends Com {
 		}
 
 		let $sender = null
-		// if (this.props.event.mode === 'lead') $sender = <div class='pt-3'></div>
+		if (this.props.event.mode === 'lead') $sender = <div class='pt-2'></div>
 
 		let $error = null
 		if (ev._error && ev.type === 'message_sent') {

package/src/chatbox/Events.js

@@ -111,23 +111,20 @@ export default class Events extends Com {
 		events = sb.map(events, (ev) => ({ev: ev}))
 
 		// console.log('-----------', this.state.isShowTyping, this.state.typing_event)
-		if (this.state.isShowTyping) {
-			let ev = this.state.typing_event || {id: 'evzz' + sb.Date.now(), created: sb.Date.now(), by: {type: 'agent'}}
-			let fakeev = {
-				is_typing: true,
+		let ev = this.state.typing_event || {id: 'evzz' + sb.Date.now(), created: sb.Date.now(), by: {type: 'agent'}}
+		let fakeev = {
+			is_typing: true,
+			is_show: this.state.isShowTyping,
+			id: ev.id,
+			ev: {
 				id: ev.id,
-				ev: {
-					id: ev.id,
-					created: ev.created,
-					by: ev.by,
-					type: 'message_sent',
-					data: {message: {text: '...', conversation_id: this.props.cid}},
-				},
-			}
-			console.log('FA', fakeev)
-			events.push(fakeev)
+				created: ev.created,
+				by: ev.by,
+				type: 'message_sent',
+				data: {message: {text: '...', conversation_id: this.props.cid}},
+			},
 		}
-
+		events.push(fakeev)
 		processEvents(convo, events)
 
 		let $events = sb.map(events, (ev) => {

package/src/chatbox/Widget.js

@@ -624,8 +624,8 @@ export default class Widget extends Com {
 							<div>{title}</div>
 							{this.renderFields(form, formName)}
 						</div>
-					</div>
-
+						</div>
+						<div class="mt-2"></div>
 					<PoweredBy store={this.props.store} t={this.props.t} />
 				</div>
 
@@ -698,6 +698,7 @@ export default class Widget extends Com {
 						<span>{this.props.t('start_conversation')}</span>
 						<img src={send} alt='send button' width='26' height='26' />
 					</button>
+						<div class="mt-2"></div>
 					<PoweredBy store={this.props.store} />
 				</div>
 			</div>