@subiz/widget-v4 4.1.187 → 4.1.190

package/assets/less/message.less

@@ -412,15 +412,15 @@ a.message_error {
 		padding: 10px 18px;
 		display: block;
 		text-align: center;
-		.color(@link);
+		.color(@black);
 		border: 1px solid @black;
 		border-radius: 12px;
 		text-overflow: ellipsis;
 		overflow: hidden;
 		font-weight: 500;
-		text-decoration: underline;
 		&:hover {
-			.color(@link-hover);
+			.color(@primary-color);
+			border-color: @primary-color;
 		}
 		white-space: nowrap;
 	}
@@ -515,6 +515,11 @@ a.message_error {
 		border: none;
 		border-top: 1px solid #d8d8d8;
 		width: 100%;
+		.color(@link);
+		&:hover {
+			.color(@link-hover);
+			border-color: #d8d8d8;
+		}
 	}
 	.generic-attachment--element-title {
 		padding: 0px 13px;
@@ -789,8 +794,7 @@ a.product_attachment__title {
 
 .message-event-actions {
 	position: absolute;
-	bottom: -18px;
-	margin-top: 4px;
+	bottom: -10px;
 	opacity: 0.7;
 	left: calc(100% - 25px);
 	display: none;
@@ -798,6 +802,10 @@ a.product_attachment__title {
 	background-color: white;
 	border-radius: 4px;
 	z-index: 10;
+
+	&.ended {
+		bottom: 14px;
+	}
 }
 
 .message-event-actions:hover {
@@ -808,13 +816,22 @@ a.product_attachment__title {
 	display: flex;
 }
 
+.message-event-actions-static {
+	visibility: hidden;
+	display: flex;
+	margin-top: 2px;
+	border: none;
+	padding: 0;
+	gap: 4px;
+}
+
 .agent-convo-event-inner.last {
 	.message-event-actions {
-		display: flex;
-		position: unset;
-		margin-top: 4px;
-		border: none;
-		padding: 0;
+		display: none;
+	}
+
+	.message-event-actions-static {
+		visibility: visible;
 	}
 
 	.message-event-action-btn {
@@ -857,7 +874,6 @@ a.product_attachment__title {
 }
 
 .message-event-action-btn {
-	height: 24px;
 	display: flex;
 	align-items: center;
 	justify-content: center;

package/assets/less/widget.less

@@ -247,7 +247,7 @@
 	justify-content: center;
 	padding-left: 32px;
 	padding-right: 32px;
-	height: 40px;
+	height: 42px;
 	.color(@text-color);
 	font-size: 16px;
 	font-weight: 500;

package/compiled_src/chatbox/Buttons.js

@@ -16,7 +16,7 @@ function Buttons(props) {
         href: 'tel:' + button.phone_number,
         key: index,
         title: button.title
-      }, props.t.i18n(button.i18n_title) || button.title);
+      }, props.t.i18n(button.i18n_title) || props.t.i18n(button.old_i18n_title) || button.title || `${props.t('call')} ${button.phone_number}`);
     }
     if (button.type === 'url_button') {
       return (0, _preact.h)("a", {
@@ -25,7 +25,7 @@ function Buttons(props) {
         target: "_blank",
         key: index,
         title: button.title
-      }, props.t.i18n(button.i18n_title) || button.title || button.url);
+      }, props.t.i18n(button.i18n_title) || props.t.i18n(button.old_i18n_title) || button.title || button.url);
     }
     if (button.type === 'postback_button') {
       return (0, _preact.h)("a", {

package/compiled_src/chatbox/ChatButton.js

@@ -58,10 +58,16 @@ class ChatButton extends _common.Com {
           return;
         }
       }
-      this.props.store.updateLastview({
-        screen: 'preview',
-        previewEvent: ev
-      });
+      let accid = _index.default.get(this.props.store.matchAccount(), 'id');
+      if (accid === 'acsbdpjwipneldivgwcr') {
+        let cid = _index.default.convoOfEv(ev);
+        if (cid) this.props.onNewMessageShowWidget && this.props.onNewMessageShowWidget(cid);
+      } else {
+        this.props.store.updateLastview({
+          screen: 'preview',
+          previewEvent: ev
+        });
+      }
       this.forceUpdate();
     });
     this.props.store.onLastview(this, () => {
@@ -126,6 +132,7 @@ class ChatButton extends _common.Com {
       let byid = greeting.agent_id;
       if (!byid) byid = randomAgent(agentM).id;
       let text = this.props.t.i18n(_index.default.get(greeting, 'greeting', {})) || greeting.message;
+      if (!text) return {};
       return {
         by: {
           id: byid,
@@ -288,6 +295,7 @@ class ChatButton extends _common.Com {
     let quickReplies = _index.default.find(attachments, att => att.type === 'quick_replies');
     quickReplies = _index.default.get(quickReplies, 'quick_replies') || [];
     quickReplies = _index.default.take(quickReplies, 10);
+    if (_index.default.get(accountSetting, 'greeting.hide_quick_replies')) quickReplies = [];
     let imgAtt = _index.default.find(attachments, att => _index.default.includes(att.mimetype, 'image') && att.url);
     let uri = _index.default.get(imgAtt, 'url') || '';
     if (uri && !uri.startsWith('https://') && !uri.startsWith('http://') && !uri.startsWith('content://') && !uri.startsWith('data:')) {

package/compiled_src/chatbox/Event.js

@@ -326,7 +326,7 @@ class Event extends _common.Com {
       });
     }
     let $sender = null;
-    if (this.props.event.mode === 'lead') $sender = (0, _preact.h)("div", {
+    if (this.props.event.mode === 'lead' && _index.default.get(ev, 'by.type') !== 'user') $sender = (0, _preact.h)("div", {
       class: "pt-3"
     });
     let $error = null;
@@ -445,8 +445,22 @@ class Event extends _common.Com {
     if (hasLike) likecls += ' active';
     let dislikecls = 'message-event-action-btn';
     if (hasDislike) dislikecls += ' active';
-    return (0, _preact.h)("div", {
-      class: "message-event-actions"
+    let actionscls = 'message-event-actions';
+    if (_index.default.get(this.props.event, 'is_end')) actionscls += ' ended';
+    return (0, _preact.h)(_preact.Fragment, null, (0, _preact.h)("div", {
+      class: actionscls
+    }, (0, _preact.h)("div", {
+      class: likecls,
+      onClick: () => this.onSendReaction(hasLike ? 'remove_like' : 'like')
+    }, (0, _preact.h)("div", {
+      class: "message-event-action-btn-svg like"
+    })), (0, _preact.h)("div", {
+      class: dislikecls,
+      onClick: () => this.onSendReaction(hasDislike ? 'remove_dislike' : 'dislike')
+    }, (0, _preact.h)("div", {
+      class: "message-event-action-btn-svg dislike"
+    }))), _index.default.get(this.props.event, 'is_end') && (0, _preact.h)("div", {
+      class: "message-event-actions-static"
     }, (0, _preact.h)("div", {
       class: likecls,
       onClick: () => this.onSendReaction(hasLike ? 'remove_like' : 'like')
@@ -457,7 +471,7 @@ class Event extends _common.Com {
       onClick: () => this.onSendReaction(hasDislike ? 'remove_dislike' : 'dislike')
     }, (0, _preact.h)("div", {
       class: "message-event-action-btn-svg dislike"
-    })));
+    }))));
   }
   renderAIDevNote() {
     if (!this.props.isLast) return null;

package/compiled_src/chatbox/Events.js

@@ -130,10 +130,10 @@ class Events extends _common.Com {
         }
       }
     };
-    events.push(fakeev);
     processEvents(convo, events);
+    events.push(fakeev);
     let $events = _index.default.map(events, ev => {
-      let isLast = ev.ev.id === _index.default.get(convo, 'last_message_sent.id');
+      let isLast = ev.is_last_message_send;
       return (0, _preact.h)(_Event.default, {
         isLast: isLast,
         chatbox: this.props.chatbox,
@@ -312,17 +312,26 @@ function processEvents(convo, events) {
       break;
     }
   }
+  let lastMsgSentIdx = -1;
   for (var i = 0; i < events.length; i++) {
     let curEvent = events[i];
     let prevEvent = events[i - 1];
+    let nextEvent = events[i + 1];
     if (curEvent.ev.type === 'message_sent') {
+      lastMsgSentIdx = i;
       curEvent.mode = 'lead';
       if (_index.default.get(prevEvent, 'ev.type') === 'message_sent' && _index.default.get(prevEvent, 'ev.by.id') === _index.default.get(curEvent, 'ev.by.id')) {
         curEvent.mode = 'follow';
       }
+      if (_index.default.get(nextEvent, 'ev.type') !== 'message_sent' || _index.default.get(nextEvent, 'ev.by.id') !== _index.default.get(curEvent, 'ev.by.id')) {
+        curEvent.is_end = true;
+      }
       continue;
     }
   }
+  if (lastMsgSentIdx > -1) {
+    events[lastMsgSentIdx].is_last_message_send = true;
+  }
 }
 function visibleEvent(ev) {
   let type = _index.default.get(ev, 'type');

package/compiled_src/chatbox/Widget.js

@@ -724,7 +724,9 @@ class Widget extends _common.Com {
       class: "widget-body--content flex-grow-1 pl-3 pr-3 pb-2 d-flex flex-column"
     }, (0, _preact.h)("div", {
       class: "mt-2 d-flex flex-column"
-    }, (0, _preact.h)("div", null, title), this.renderFields(form, formName)), (0, _preact.h)("div", {
+    }, (0, _preact.h)("div", null, title), this.renderFields(form, formName)), this.props.store.isMobile() ? (0, _preact.h)("div", {
+      style: "height: 20px !important; flex-shrink: 0 !important"
+    }) : (0, _preact.h)("div", {
       style: "min-height: 15px !important; flex: 1 !important; flex-shrink: 0 !important"
     }), (0, _preact.h)("button", {
       class: btncls,

package/compiled_src/chatbox/main.js

@@ -86,6 +86,7 @@ class Main extends _common.Com {
       ref: this.refButton,
       isShow: !isShowWidget,
       onClick: e => this.showWidget(e),
+      onNewMessageShowWidget: cid => this.onNewMessageShowWidget(cid),
       onSelectQuickReply: msg => this.onSelectQuickReply(msg),
       t: this.props.t
     }), (0, _preact.h)(_Widget.default, {
@@ -143,6 +144,18 @@ class Main extends _common.Com {
       this.refWidget.current && this.refWidget.current.sendMessage(message);
     });
   }
+  onNewMessageShowWidget(cid) {
+    if (this.props.store.isMobile()) modifyViewport();
+    this.props.store.updateLastview({
+      screen: 'widget',
+      previewEvent: {},
+      view: 'chat',
+      opts: {
+        cid
+      }
+    });
+    this.forceUpdate();
+  }
   async showWidget(p) {
     let cid = p.cid;
     let newView = {
@@ -183,7 +196,8 @@ class Main extends _common.Com {
     restoreViewport();
     this.props.store.updateLastview({
       screen: 'button',
-      previewEvent: {}
+      previewEvent: {},
+      minimized: Date.now()
     });
     this.forceUpdate();
   }

package/compiled_src/store/store.js

@@ -882,7 +882,6 @@ class Store {
       this.pubsub.publish('events', oldev);
     }
     if (ev.type !== 'message_pong' && ev.type !== 'conversation_typing') {
-      this.chain.put(cid, ev.id, _index.default.getMs(ev.created), ev);
       if (ev.type === 'message_sent') {
         let idemkey = _index.default.get(ev, 'data.message.idempotency_key');
         let found = _index.default.find(this.listEvents(cid), oldev => oldev.id === idemkey);
@@ -892,6 +891,7 @@ class Store {
         }
         convo.last_message_sent = ev;
       }
+      this.chain.put(cid, ev.id, _index.default.getMs(ev.created), ev);
     }
     this._setConvo(convo);
     this.pubsub.publish('account');

package/compiled_src/util/common.js

@@ -148,10 +148,13 @@ function extractLinks(text) {
   var out = [];
   var match;
   while (match = reg.exec(text)) {
-    out.push({
-      index: match.index,
-      length: reg.lastIndex - match.index
-    });
+    const MINIMUM_URL_CHARS = 5;
+    if (reg.lastIndex - match.index > MINIMUM_URL_CHARS + 1) {
+      out.push({
+        index: match.index,
+        length: reg.lastIndex - match.index
+      });
+    }
   }
   return out;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.187",
+	"version": "4.1.190",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -22,14 +22,14 @@
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.28.3",
-		"@babel/core": "^7.28.4",
+		"@babel/core": "^7.28.5",
 		"@babel/plugin-proposal-class-properties": "^7.18.6",
 		"@babel/plugin-transform-react-jsx": "^7.27.1",
-		"@babel/preset-env": "^7.28.3",
+		"@babel/preset-env": "^7.28.5",
 		"babel-loader": "^10.0.0",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.6.4",
-		"puppeteer": "^24.25.0",
+		"puppeteer": "^24.27.0",
 		"webpack": "^5.102.1",
 		"webpack-bundle-analyzer": "^4.10.2",
 		"webpack-cli": "^6.0.1",

package/src/chatbox/Buttons.js

@@ -7,7 +7,7 @@ export default function Buttons(props) {
 		if (button.type === 'call_button') {
 			return (
 				<a class='url-button-attachment' href={'tel:' + button.phone_number} key={index} title={button.title}>
-					{props.t.i18n(button.i18n_title) || button.title}
+					{props.t.i18n(button.i18n_title) || props.t.i18n(button.old_i18n_title) || button.title || `${props.t('call')} ${button.phone_number}`}
 				</a>
 			)
 		}
@@ -15,7 +15,7 @@ export default function Buttons(props) {
 		if (button.type === 'url_button') {
 			return (
 				<a class='url-button-attachment' href={button.url} target='_blank' key={index} title={button.title}>
-					{props.t.i18n(button.i18n_title) || button.title || button.url}
+					{props.t.i18n(button.i18n_title) || props.t.i18n(button.old_i18n_title) || button.title || button.url}
 				</a>
 			)
 		}

package/src/chatbox/ChatButton.js

@@ -58,7 +58,15 @@ export default class ChatButton extends Com {
 				}
 			}
 
-			this.props.store.updateLastview({screen: 'preview', previewEvent: ev})
+			let accid = sb.get(this.props.store.matchAccount(), 'id')
+
+			// american study request old flow
+			if (accid === 'acsbdpjwipneldivgwcr') {
+				let cid = sb.convoOfEv(ev)
+				if (cid) this.props.onNewMessageShowWidget && this.props.onNewMessageShowWidget(cid)
+			} else {
+				this.props.store.updateLastview({screen: 'preview', previewEvent: ev})
+			}
 			this.forceUpdate()
 		})
 		this.props.store.onLastview(this, () => {
@@ -145,6 +153,7 @@ export default class ChatButton extends Com {
 			if (!byid) byid = randomAgent(agentM).id
 
 			let text = this.props.t.i18n(sb.get(greeting, 'greeting', {})) || greeting.message
+			if (!text) return {} // work for api subiz('overrideChatbox', {greeting; ''})
 			return {
 				by: {id: byid, type: 'agent'},
 				data: {message: {text, format: 'plaintext'}},
@@ -299,6 +308,8 @@ export default class ChatButton extends Com {
 		let quickReplies = sb.find(attachments, (att) => att.type === 'quick_replies')
 		quickReplies = sb.get(quickReplies, 'quick_replies') || []
 		quickReplies = sb.take(quickReplies, 10)
+		// dont show with setting greeting.hide_quick_replies
+		if (sb.get(accountSetting, 'greeting.hide_quick_replies')) quickReplies = []
 		let imgAtt = sb.find(attachments, (att) => sb.includes(att.mimetype, 'image') && att.url)
 		let uri = sb.get(imgAtt, 'url') || ''
 		if (

package/src/chatbox/Event.js

@@ -19,7 +19,7 @@ import InfoMessage from './InfoMessage.js' // message by system like convo join,
 import sb from '../util/index.js'
 import Time from './time.js'
 import {Com} from '../common.js'
-import {h, createRef} from 'preact'
+import {h, createRef, Fragment} from 'preact'
 
 // ['event'],
 export default class Event extends Com {
@@ -300,7 +300,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' && sb.get(ev, 'by.type') !== 'user') $sender = <div class='pt-3'></div>
 
 		let $error = null
 		if (ev._error) $dot = null
@@ -396,15 +396,31 @@ export default class Event extends Com {
 		if (hasLike) likecls += ' active'
 		let dislikecls = 'message-event-action-btn'
 		if (hasDislike) dislikecls += ' active'
+
+		let actionscls = 'message-event-actions'
+		if (sb.get(this.props.event, 'is_end')) actionscls += ' ended'
+
 		return (
-			<div class='message-event-actions'>
-				<div class={likecls} onClick={() => this.onSendReaction(hasLike ? 'remove_like' : 'like')}>
-					<div class='message-event-action-btn-svg like' />
-				</div>
-				<div class={dislikecls} onClick={() => this.onSendReaction(hasDislike ? 'remove_dislike' : 'dislike')}>
-					<div class='message-event-action-btn-svg dislike' />
+			<Fragment>
+				<div class={actionscls}>
+					<div class={likecls} onClick={() => this.onSendReaction(hasLike ? 'remove_like' : 'like')}>
+						<div class='message-event-action-btn-svg like' />
+					</div>
+					<div class={dislikecls} onClick={() => this.onSendReaction(hasDislike ? 'remove_dislike' : 'dislike')}>
+						<div class='message-event-action-btn-svg dislike' />
+					</div>
 				</div>
-			</div>
+				{sb.get(this.props.event, 'is_end') && (
+					<div class='message-event-actions-static'>
+						<div class={likecls} onClick={() => this.onSendReaction(hasLike ? 'remove_like' : 'like')}>
+							<div class='message-event-action-btn-svg like' />
+						</div>
+						<div class={dislikecls} onClick={() => this.onSendReaction(hasDislike ? 'remove_dislike' : 'dislike')}>
+							<div class='message-event-action-btn-svg dislike' />
+						</div>
+					</div>
+				)}
+			</Fragment>
 		)
 	}
 

package/src/chatbox/Events.js

@@ -124,11 +124,13 @@ export default class Events extends Com {
 				data: {message: {text: '...', conversation_id: this.props.cid}},
 			},
 		}
-		events.push(fakeev)
+
 		processEvents(convo, events)
+		// we dont want fakeev cause some unexpected buf when processEvents
+		events.push(fakeev)
 
 		let $events = sb.map(events, (ev) => {
-			let isLast = ev.ev.id === sb.get(convo, 'last_message_sent.id')
+			let isLast = ev.is_last_message_send
 			return (
 				<Event
 					isLast={isLast}
@@ -320,12 +322,16 @@ function processEvents(convo, events) {
 		}
 	}
 
+	let lastMsgSentIdx = -1
 	// insert lead
 	for (var i = 0; i < events.length; i++) {
 		let curEvent = events[i]
 		let prevEvent = events[i - 1]
+		let nextEvent = events[i + 1]
 
 		if (curEvent.ev.type === 'message_sent') {
+			// ignore fake typing message_sent event at last
+			lastMsgSentIdx = i
 			curEvent.mode = 'lead'
 			if (
 				sb.get(prevEvent, 'ev.type') === 'message_sent' &&
@@ -333,9 +339,18 @@ function processEvents(convo, events) {
 			) {
 				curEvent.mode = 'follow'
 			}
+			if (
+				sb.get(nextEvent, 'ev.type') !== 'message_sent' ||
+				sb.get(nextEvent, 'ev.by.id') !== sb.get(curEvent, 'ev.by.id')
+			) {
+				curEvent.is_end = true
+			}
 			continue
 		}
 	}
+	if (lastMsgSentIdx > -1) {
+		events[lastMsgSentIdx].is_last_message_send = true
+	}
 }
 
 function visibleEvent(ev) {

package/src/chatbox/Widget.js

@@ -650,7 +650,11 @@ export default class Widget extends Com {
 						<div>{title}</div>
 						{this.renderFields(form, formName)}
 					</div>
-					<div style='min-height: 15px !important; flex: 1 !important; flex-shrink: 0 !important'></div>
+					{this.props.store.isMobile() ? (
+						<div style='height: 20px !important; flex-shrink: 0 !important'></div>
+					) : (
+						<div style='min-height: 15px !important; flex: 1 !important; flex-shrink: 0 !important'></div>
+					)}
 					<button
 						class={btncls}
 						onClick={(_) => this.submitPrechatForm(form, formName)}

package/src/chatbox/main.js

@@ -91,6 +91,7 @@ export default class Main extends Com {
 					ref={this.refButton}
 					isShow={!isShowWidget}
 					onClick={(e) => this.showWidget(e)}
+					onNewMessageShowWidget={(cid) => this.onNewMessageShowWidget(cid)}
 					onSelectQuickReply={(msg) => this.onSelectQuickReply(msg)}
 					t={this.props.t}
 				/>
@@ -152,6 +153,12 @@ export default class Main extends Com {
 		})
 	}
 
+	onNewMessageShowWidget(cid) {
+		if (this.props.store.isMobile()) modifyViewport()
+		this.props.store.updateLastview({screen: 'widget', previewEvent: {}, view: 'chat', opts: {cid}})
+		this.forceUpdate()
+	}
+
 	async showWidget(p) {
 		//this.refButton.current && this.refButton.current.ClearPreview()
 
@@ -189,7 +196,7 @@ export default class Main extends Com {
 
 	hideWidget() {
 		restoreViewport()
-		this.props.store.updateLastview({screen: 'button', previewEvent: {}})
+		this.props.store.updateLastview({screen: 'button', previewEvent: {}, minimized: Date.now()})
 		this.forceUpdate()
 	}
 

package/src/store/store.js

@@ -1039,7 +1039,6 @@ export default class Store {
 
 		// dont store pong and typing
 		if (ev.type !== 'message_pong' && ev.type !== 'conversation_typing') {
-			this.chain.put(cid, ev.id, sb.getMs(ev.created), ev)
 			if (ev.type === 'message_sent') {
 				let idemkey = sb.get(ev, 'data.message.idempotency_key')
 				let found = sb.find(this.listEvents(cid), (oldev) => oldev.id === idemkey)
@@ -1051,6 +1050,7 @@ export default class Store {
 
 				convo.last_message_sent = ev
 			}
+			this.chain.put(cid, ev.id, sb.getMs(ev.created), ev)
 		}
 		this._setConvo(convo)
 		this.pubsub.publish('account')

package/src/util/common.js

@@ -102,7 +102,10 @@ export function extractLinks(text) {
 	var out = []
 	var match
 	while ((match = reg.exec(text))) {
-		out.push({index: match.index, length: reg.lastIndex - match.index})
+		const MINIMUM_URL_CHARS = 5
+		if (reg.lastIndex - match.index > MINIMUM_URL_CHARS + 1) {
+			out.push({index: match.index, length: reg.lastIndex - match.index})
+		}
 	}
 
 	return out