@subiz/widget-v4 4.1.115 → 4.1.117

package/assets/less/chatbox.less

@@ -37,7 +37,7 @@
 @font-family-sans-serif: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
 	sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
-@font-size-base: 15px; // Assumes the browser default, typically `16px`
+@font-size-base: 16px; // Assumes the browser default, typically `16px`
 
 @text-muted: #6c757d;
 

package/assets/less/message.less

@@ -100,18 +100,24 @@
 .message-text--user {
 	margin: 5px 0 0;
 	display: inline-block;
-	background-color: @gray-200;
-	.color(@black);
-	padding: 10px 14px 10px 14px;
+	font-weight: 500;
+
+	background-color: @primary-color;
+	.color(@text-color);
+
+
+	padding: 12px 16px 12px 16px;
 	//padding: 12px;
 }
 
 .message-text--agent {
 	white-space: pre-wrap;
 	display: inline-block;
-	background-color: @primary-color;
-	.color(@text-color);
-	padding: 10px 14px 10px 14px;
+
+	background-color: @gray-200;
+	.color(@black);
+
+	padding: 12px 16px 12px 16px;
 }
 .message-agent.message-text--agent {
 	max-width: unset;
@@ -142,7 +148,8 @@
 }
 
 .message-user {
-	border-radius: 7px;
+	border-radius: 18px;
+	border-bottom-right-radius: 4px;
 	max-width: 85%;
 	align-self: flex-end;
 	word-break: break-word;
@@ -161,7 +168,8 @@
 }
 
 .message-agent {
-	border-radius: 7px;
+	border-radius: 18px;
+	border-bottom-left-radius: 4px;
 	max-width: 85%;
 	word-break: break-word;
 	position: relative;
@@ -342,7 +350,7 @@ a.message_error {
 	border-radius: 7px;
 	padding: 10px;
 	text-align: center;
-	font-size: 15px;
+	font-size: 16px;
 	&:hover {
 		.color(@text-color);
 	}

package/assets/less/order.less

@@ -129,7 +129,7 @@
 		margin-top: 0px;
 		background: #f4f4f4;
 		margin-top: 20px;
-		width: 250px;
+		width: 270px;
 		box-shadow: 0 0 0 1px hsl(0deg 0% 69% / 20%), 0 15px 35px 0 rgb(49 49 93 / 8%), 0 5px 15px 0 rgb(0 0 0 / 6%);
 		border-radius: 6px;
 		background-color: #fff;

package/assets/less/widget.less

@@ -255,7 +255,7 @@
 	line-height: 20px;
 	text-align: center;
 	background: @primary-color;
-	max-width: 250px;
+	max-width: 270px;
 	width: 70%;
 	text-overflow: ellipsis;
 	white-space: nowrap;

package/assets/less/widget_header.less

@@ -43,9 +43,9 @@
 	}
 
 	.widget-header--description {
-		font-size: 15px;
+		font-size: 14px;
 		white-space: pre-wrap;
-		opacity: 0.8;
+		opacity: 0.7;
 		flex: 1;
 		.color(@text-color);
 		margin-top: 2.5px;

package/compiled_src/chatbox/Event.js

@@ -171,8 +171,7 @@ class Event extends _common.Com {
       let innercls = 'agent-convo-event-inner';
       if (this.props.isLast) innercls += ' last';
       return (0, _preact.h)("div", {
-        class: "convo-event agent-message",
-        title: t
+        class: "convo-event agent-message"
       }, $time, $sender, (0, _preact.h)("div", {
         class: "agent-convo-event-wrapper"
       }, (0, _preact.h)("div", {
@@ -259,8 +258,7 @@ class Event extends _common.Com {
       }));
     }
     return (0, _preact.h)("div", {
-      class: "convo-event user-message",
-      title: t
+      class: "convo-event user-message"
     }, $time, $sender, (0, _preact.h)("div", {
       class: "message-user__container"
     }, $dot, (0, _preact.h)(_TextMessage.default, {

package/compiled_src/chatbox/MessageInput.js

@@ -214,6 +214,12 @@ class MessageInput extends _common.Com {
       class: "emoji-picker--item emoji--wink"
     })));
   }
+  applyMessage(text) {
+    this.setState({
+      msgValue: text
+    });
+    this.resizeInput();
+  }
   focus() {
     if (this.props.disabled) return;
     this.refMessageInput.current && this.refMessageInput.current.focus();

package/compiled_src/chatbox/TextMessage.js

@@ -21,6 +21,7 @@ class TextMessage extends _common.Com {
     var text = _index.default.get(this.props.ev, 'data.message.text');
     text = _index.default.trim(text);
     if (_index.default.size(text) === 0) return null;
+    let t = new _index.default.Date(_index.default.get(this.props.ev, 'created')).toLocaleString();
     let byType = _index.default.get(this.props.ev, 'by.type');
     if (byType !== 'user') byType = 'agent';
     var tags = _index.default.extractText(text).map(tag => {
@@ -49,26 +50,31 @@ class TextMessage extends _common.Com {
     });
     if (_index.default.size(tags) === 0) return null;
     if (byType === 'agent') return (0, _preact.h)("div", {
-      class: "message-agent message-text--agent"
+      class: "message-agent message-text--agent",
+      title: t
     }, tags);
     return (0, _preact.h)("div", {
-      class: "message-user message-text--user"
+      class: "message-user message-text--user",
+      title: t
     }, tags);
   }
   renderBlock(block) {
     if (isEmptyBlock(block)) return null;
+    let t = new _index.default.Date(_index.default.get(this.props.ev, 'created')).toLocaleString();
     let byType = _index.default.get(this.props.ev, 'by.type');
     if (byType !== 'user') byType = 'agent';
     if (byType === 'agent') {
       return (0, _preact.h)("div", {
-        class: "message-agent message-text--agent"
+        class: "message-agent message-text--agent",
+        title: t
       }, (0, _preact.h)(_block.default, {
         block: block,
         onLink: this.props.onLink
       }));
     }
     return (0, _preact.h)("div", {
-      class: "message-user message-text--user"
+      class: "message-user message-text--user",
+      title: t
     }, (0, _preact.h)(_block.default, {
       block: block,
       onLink: this.props.onLink

package/compiled_src/chatbox/Widget.js

@@ -135,6 +135,9 @@ class Widget extends _common.Com {
     if (!this.props.store.isMobile()) this.focusInput();
     this.updateFormDataFields();
   }
+  applyMessage(text) {
+    this.focusInput(text);
+  }
   componentDidUpdate(prevProp) {
     if (prevProp.isShow !== this.props.isShow) {
       if (this.props.isShow && !this.props.store.isMobile()) this.focusInput();
@@ -727,7 +730,7 @@ class Widget extends _common.Com {
     _index.default.setTimeout(() => $input && $input.blur());
     _index.default.setTimeout(() => $input && $input.blur(), 300);
   }
-  focusInput() {
+  focusInput(text) {
     if (this.props.store.isPreview) return;
     if (this.shouldShowForm()) {
       let firstemptykey = '';
@@ -745,6 +748,9 @@ class Widget extends _common.Com {
     }
     var $input = this.msgInput.current;
     if (!$input) return;
+    if (text != undefined && typeof text === 'string') {
+      $input.applyMessage(text);
+    }
     _index.default.setTimeout(() => $input.focus());
     _index.default.setTimeout(() => $input.focus(), 300);
   }

package/compiled_src/chatbox/main.js

@@ -155,6 +155,9 @@ class Main extends _common.Com {
       cid: p.cid
     });
   }
+  applyMessage(text) {
+    this.refWidget.current && this.refWidget.current.applyMessage(text);
+  }
   showGreeting() {
     this.refButton.current && this.refButton.current.ShowGreeting();
   }

package/compiled_src/lib.js

@@ -260,6 +260,10 @@ class Widget {
     if (this.pluginMgr) this.pluginMgr.destroy();
     this.store.destroy();
   }
+  async applyMessage(msg) {
+    await this.domGate.entry();
+    this.pluginMgr.applyTextToCurrentChatbox(msg);
+  }
   _overridePlugin(plugins) {
     this.store.overridePlugin(plugins);
   }

package/compiled_src/plugin.js

@@ -264,6 +264,10 @@ class PluginMgr {
     let chatbox = this.findChatbox();
     if (chatbox) return chatbox.call('showGreeting');
   }
+  applyTextToCurrentChatbox(text) {
+    let chatbox = this.findChatbox();
+    if (chatbox) return chatbox.call('applyMessage', text);
+  }
   hideCurrentGreeting() {
     let chatbox = this.findChatbox();
     if (chatbox) return chatbox.call('hideGreeting');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.1.115",
+	"version": "4.1.117",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",
@@ -30,8 +30,8 @@
 		"babel-loader": "^10.0.0",
 		"babel-plugin-syntax-jsx": "^6.18.0",
 		"html-webpack-plugin": "^5.6.3",
-		"puppeteer": "^24.6.0",
-		"webpack": "^5.99.1",
+		"puppeteer": "^24.6.1",
+		"webpack": "^5.99.5",
 		"webpack-bundle-analyzer": "^4.10.2",
 		"webpack-cli": "^6.0.1",
 		"webpack-dev-server": "^5.2.1"

package/src/chatbox/Event.js

@@ -170,7 +170,7 @@ export default class Event extends Com {
 			let innercls = 'agent-convo-event-inner'
 			if (this.props.isLast) innercls += ' last'
 			return (
-				<div class='convo-event agent-message' title={t}>
+				<div class='convo-event agent-message'>
 					{$time}
 					{$sender}
 					<div class='agent-convo-event-wrapper'>
@@ -238,7 +238,7 @@ export default class Event extends Com {
 		}
 
 		return (
-			<div class='convo-event user-message' title={t}>
+			<div class='convo-event user-message'>
 				{$time}
 				{$sender}
 				<div class='message-user__container'>

package/src/chatbox/MessageInput.js

@@ -226,6 +226,11 @@ export default class MessageInput extends Com {
 		)
 	}
 
+	applyMessage(text) {
+		this.setState({msgValue: text})
+		this.resizeInput()
+	}
+
 	focus() {
 		if (this.props.disabled) return
 		this.refMessageInput.current && this.refMessageInput.current.focus()

package/src/chatbox/TextMessage.js

@@ -16,7 +16,7 @@ export default class TextMessage extends Com {
 		var text = sb.get(this.props.ev, 'data.message.text')
 		text = sb.trim(text)
 		if (sb.size(text) === 0) return null
-
+		let t = new sb.Date(sb.get(this.props.ev, 'created')).toLocaleString()
 		let byType = sb.get(this.props.ev, 'by.type')
 		if (byType !== 'user') byType = 'agent'
 		var tags = sb.extractText(text).map((tag) => {
@@ -44,23 +44,33 @@ export default class TextMessage extends Com {
 		})
 
 		if (sb.size(tags) === 0) return null
-		if (byType === 'agent') return <div class='message-agent message-text--agent'>{tags}</div>
-		return <div class='message-user message-text--user'>{tags}</div>
+		if (byType === 'agent')
+			return (
+				<div class='message-agent message-text--agent' title={t}>
+					{tags}
+				</div>
+			)
+		return (
+			<div class='message-user message-text--user' title={t}>
+				{tags}
+			</div>
+		)
 	}
 
 	renderBlock(block) {
 		if (isEmptyBlock(block)) return null
+		let t = new sb.Date(sb.get(this.props.ev, 'created')).toLocaleString()
 		let byType = sb.get(this.props.ev, 'by.type')
 		if (byType !== 'user') byType = 'agent'
 		if (byType === 'agent') {
 			return (
-				<div class='message-agent message-text--agent'>
+				<div class='message-agent message-text--agent' title={t}>
 					<Block block={block} onLink={this.props.onLink} />
 				</div>
 			)
 		}
 		return (
-			<div class='message-user message-text--user'>
+			<div class='message-user message-text--user' title={t}>
 				<Block block={block} onLink={this.props.onLink} />
 			</div>
 		)

package/src/chatbox/Widget.js

@@ -49,6 +49,10 @@ export default class Widget extends Com {
 		this.updateFormDataFields()
 	}
 
+	applyMessage(text) {
+		this.focusInput(text)
+	}
+
 	componentDidUpdate(prevProp) {
 		if (prevProp.isShow !== this.props.isShow) {
 			if (this.props.isShow && !this.props.store.isMobile()) this.focusInput()
@@ -130,7 +134,7 @@ export default class Widget extends Com {
 		let position = sb.get(accountSetting, 'desktop_button.position') || 'right'
 		if (this.props.store.isMobile()) position = sb.get(accountSetting, 'mobile_button.position', position)
 		let cls = 'widget-container widget-container--' + position
-		if ( !this.props.store.isMobile() && sb.get(accountSetting, 'window_mode') === 'full')
+		if (!this.props.store.isMobile() && sb.get(accountSetting, 'window_mode') === 'full')
 			cls += ' widget-container--full'
 		if (!this.props.isShow) cls += ' widget-container--hide'
 		let hideheader = sb.get(accountSetting, 'header.hidden', false)
@@ -709,9 +713,8 @@ export default class Widget extends Com {
 		sb.setTimeout(() => $input && $input.blur(), 300) // force lose focus
 	}
 
-	focusInput() {
+	focusInput(text) {
 		if (this.props.store.isPreview) return
-
 		if (this.shouldShowForm()) {
 			// focus on the element
 			let firstemptykey = ''
@@ -733,6 +736,9 @@ export default class Widget extends Com {
 
 		var $input = this.msgInput.current
 		if (!$input) return
+		if (text != undefined && typeof text === 'string') {
+			$input.applyMessage(text)
+		}
 		sb.setTimeout(() => $input.focus())
 		sb.setTimeout(() => $input.focus(), 300) // force focus
 	}

package/src/chatbox/main.js

@@ -168,6 +168,10 @@ export default class Main extends Com {
 		this.props.store.setLastview(p.view, {cid: p.cid})
 	}
 
+	applyMessage(text) {
+		this.refWidget.current && this.refWidget.current.applyMessage(text)
+	}
+
 	showGreeting() {
 		this.refButton.current && this.refButton.current.ShowGreeting()
 	}

package/src/lib.js

@@ -275,6 +275,11 @@ class Widget {
 		this.store.destroy()
 	}
 
+	async applyMessage(msg) {
+		await this.domGate.entry()
+		this.pluginMgr.applyTextToCurrentChatbox(msg)
+	}
+
 	_overridePlugin(plugins) {
 		this.store.overridePlugin(plugins)
 	}

package/src/plugin.js

@@ -302,6 +302,11 @@ export default class PluginMgr {
 		if (chatbox) return chatbox.call('showGreeting')
 	}
 
+	applyTextToCurrentChatbox(text) {
+		let chatbox = this.findChatbox()
+		if (chatbox) return chatbox.call('applyMessage', text)
+	}
+
 	hideCurrentGreeting() {
 		let chatbox = this.findChatbox()
 		if (chatbox) return chatbox.call('hideGreeting')