@subiz/widget-v4 4.1.115 → 4.1.116

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/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/package.json

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

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/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>
 		)