@subiz/widget-v4 4.0.79 → 4.0.82

package/assets/less/message.less

@@ -426,7 +426,7 @@ a.message_error {
 }
 
 .generic-attachment {
-	display: inline-block;
+	display: flex;
 	width: 100%;
 	overflow: hidden;
 	width: 100%;
@@ -436,6 +436,10 @@ a.message_error {
 	cursor: grab;
 }
 
+.generic-attachment--element-content {
+	flex: 1;
+}
+
 .generic-attachment--element {
 	border: 1px solid #d8d8d8;
 	background: white;
@@ -443,8 +447,10 @@ a.message_error {
 	overflow: hidden;
 	width: 220px;
 	margin-right: 10px;
-	display: inline-block;
 	vertical-align: top;
+	display: flex;
+	flex-direction: column;
+	flex-shrink: 0;
 
 	&:last-child {
 		margin-right: 0;

package/compiled_src/chatbox/GenericTemplateAttachments.js

@@ -67,7 +67,9 @@ class GenericTemplateAttachments extends _common.Com {
           alt: "generic attachment element",
           class: "generic-attachment--element-img",
           src: this.props.store.replaceFileUrl(ele.image_url)
-        })), $title, $subtitle, (0, _preact.h)(_Buttons.default, {
+        })), (0, _preact.h)("div", {
+          class: "generic-attachment--element-content"
+        }, $title, $subtitle), (0, _preact.h)(_Buttons.default, {
           buttons: ele.buttons,
           onSelect: button => this.props.onSelect(button),
           t: this.props.t

package/compiled_src/chatbox/ShadowDomRoot.js

@@ -31,8 +31,7 @@ img { max-width: 100%; display: block; margin: 10px auto; }
 * { white-space: normal }
 ul > li { margin-bottom: 5px }
 ul:last-child { margin-bottom: 0 }
-p:first-child { margin-top: 0;}
-p:last-child { margin-bottom: 0;}
+p { margin-bottom: 0; margin-top: 0;}
 </style>
 <div>${html}</div>`;
     let links = this.shadowRoot.querySelectorAll('a');

package/compiled_src/chatbox/TextMessage.js

@@ -45,7 +45,11 @@ class TextMessage extends _common.Com {
     var format = _index.default.get(this.props.ev, 'data.message.format', 'plaintext');
 
     if (format === 'markdown') return this.renderMarkdown();
+    if (format === 'delta') return this.renderDelta();
+    return this.renderPlainText();
+  }
 
+  renderPlainText() {
     var text = _index.default.get(this.props.ev, 'data.message.text');
 
     text = _index.default.trim(text);
@@ -95,9 +99,25 @@ class TextMessage extends _common.Com {
     }, tags);
   }
 
-  renderMarkdown() {
-    var text = _index.default.get(this.props.ev, 'data.message.text');
+  renderDelta() {
+    let deltas = _index.default.get(this.props.ev, 'data.message.quill_delta');
+
+    deltas = _index.default.parseJSON(deltas) || {};
+    deltas = deltas.ops || [];
+
+    let isMarkdown = _index.default.find(deltas, delta => _index.default.get(delta, 'attributes.bold') || _index.default.get(delta, 'attributes.italic') || _index.default.get(delta, 'attributes.underline'));
+
+    if (isMarkdown) {
+      var text = deltaToMarkdown(deltas);
+      console.log('text', text);
+      return this.renderMarkdown(text);
+    }
+
+    return this.renderPlainText();
+  }
 
+  renderMarkdown(text) {
+    if (!text) text = _index.default.get(this.props.ev, 'data.message.text');
     if (_index.default.size(text) === 0) return null;
 
     let byType = _index.default.get(this.props.ev, 'by.type');
@@ -124,4 +144,48 @@ class TextMessage extends _common.Com {
 
 }
 
-exports.default = TextMessage;
+exports.default = TextMessage;
+
+function deltaToMarkdown(deltas) {
+  let output = '';
+
+  _index.default.each(deltas, (delta, idx) => {
+    let text = '';
+    let insert = delta.insert;
+    let attributes = delta.attributes;
+    if (insert.emoji) text = emojiCodes[insert.emoji] || '';
+
+    if (attributes) {
+      if (attributes.italic && attributes.bold) text = `*__${insert}__*`;else if (attributes.italic) text = `*${insert}*`;else if (attributes.bold) text = `**${insert}**`;else text = insert;
+    }
+
+    if (insert.dynamicField) text = `${_index.default.get(insert, 'dynamicField.text', '')}`;
+
+    if (!insert.emoji && !attributes && !insert.dynamicField) {
+      text = insert || '';
+      text = text.replace(/\n/g, '<br/>');
+    }
+
+    output += text;
+  });
+
+  return output;
+}
+
+const emojiCodes = {
+  like: '👍',
+  unlike: '👎',
+  angry: '😠',
+  confused: '😕',
+  crying: '😢',
+  grinning: '😀',
+  'heart-eyes': '😍',
+  neutral: '😐',
+  sleepy: '😪',
+  sad: '😞',
+  smiling: '😄',
+  'tongue-out': '😛',
+  tired: '😩',
+  surprised: '😮',
+  wink: '😉'
+};

package/compiled_src/popup/popup.js

@@ -1012,6 +1012,16 @@ class Popup extends _common.Com {
       if (com.type === 'image') return this.renderImageComponent(com, i);
     });
 
+    let formComponents = _index.default.filter(page.components, com => com.type !== 'image');
+
+    if (!formComponents.length) {
+      formcss.background = 'transparent';
+      formcss.padding_top = '0';
+      formcss.padding_bottom = '0';
+      formcss.padding_left = '0';
+      formcss.padding_right = '0';
+    }
+
     return (0, _preact.h)("div", {
       class: "overlay",
       style: overlaystyle

package/compiled_src/store/store.js

@@ -759,7 +759,7 @@ class Store {
         if (pong.member_id == user.id && pong.type === 'seen') {
           let mem = _index.default.find(convo.members, mem => mem.id === user.id);
 
-          mem.seen_at = pong.created;
+          if (mem) mem.seen_at = pong.created;
         }
       });
 

package/package.json

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

package/src/chatbox/GenericTemplateAttachments.js

@@ -51,8 +51,10 @@ export default class GenericTemplateAttachments extends Com {
 								src={this.props.store.replaceFileUrl(ele.image_url)}
 							/>
 						</div>
-						{$title}
-						{$subtitle}
+						<div class='generic-attachment--element-content'>
+							{$title}
+							{$subtitle}
+						</div>
 						<Buttons buttons={ele.buttons} onSelect={(button) => this.props.onSelect(button)} t={this.props.t} />
 					</div>
 				)

package/src/chatbox/ShadowDomRoot.js

@@ -21,8 +21,7 @@ img { max-width: 100%; display: block; margin: 10px auto; }
 * { white-space: normal }
 ul > li { margin-bottom: 5px }
 ul:last-child { margin-bottom: 0 }
-p:first-child { margin-top: 0;}
-p:last-child { margin-bottom: 0;}
+p { margin-bottom: 0; margin-top: 0;}
 </style>
 <div>${html}</div>`
 		let links = this.shadowRoot.querySelectorAll('a')

package/src/chatbox/TextMessage.js

@@ -22,7 +22,11 @@ export default class TextMessage extends Com {
 	render() {
 		var format = sb.get(this.props.ev, 'data.message.format', 'plaintext')
 		if (format === 'markdown') return this.renderMarkdown()
+		if (format === 'delta') return this.renderDelta()
+		return this.renderPlainText()
+	}
 
+	renderPlainText() {
 		var text = sb.get(this.props.ev, 'data.message.text')
 		text = sb.trim(text)
 		if (sb.size(text) === 0) return null
@@ -60,8 +64,25 @@ export default class TextMessage extends Com {
 		return <div class='message-user message-text--user'>{tags}</div>
 	}
 
-	renderMarkdown() {
-		var text = sb.get(this.props.ev, 'data.message.text')
+	renderDelta() {
+		let deltas = sb.get(this.props.ev, 'data.message.quill_delta')
+		deltas = sb.parseJSON(deltas) || {}
+		deltas = deltas.ops || []
+		let isMarkdown = sb.find(
+			deltas,
+			(delta) =>
+				sb.get(delta, 'attributes.bold') || sb.get(delta, 'attributes.italic') || sb.get(delta, 'attributes.underline'),
+		)
+		if (isMarkdown) {
+			var text = deltaToMarkdown(deltas)
+			console.log('text', text)
+			return this.renderMarkdown(text)
+		}
+		return this.renderPlainText()
+	}
+
+	renderMarkdown(text) {
+		if (!text) text = sb.get(this.props.ev, 'data.message.text')
 		if (sb.size(text) === 0) return null
 
 		let byType = sb.get(this.props.ev, 'by.type')
@@ -86,3 +107,48 @@ export default class TextMessage extends Com {
 		)
 	}
 }
+
+function deltaToMarkdown(deltas) {
+	let output = ''
+	sb.each(deltas, (delta, idx) => {
+		let text = ''
+		let insert = delta.insert
+		let attributes = delta.attributes
+		// emoji
+		if (insert.emoji) text = emojiCodes[insert.emoji] || ''
+		// insert bold, italic, underline
+		if (attributes) {
+			if (attributes.italic && attributes.bold) text = `*__${insert}__*`
+			else if (attributes.italic) text = `*${insert}*`
+			else if (attributes.bold) text = `**${insert}**`
+			else text = insert
+		}
+		if (insert.dynamicField) text = `${sb.get(insert, 'dynamicField.text', '')}`
+		if (!insert.emoji && !attributes && !insert.dynamicField) {
+			text = insert || ''
+			// markdown need newline to <br/> characters to newline
+			text = text.replace(/\n/g, '<br/>')
+		}
+
+		output += text
+	})
+	return output
+}
+
+const emojiCodes = {
+	like: '👍',
+	unlike: '👎',
+	angry: '😠',
+	confused: '😕',
+	crying: '😢',
+	grinning: '😀',
+	'heart-eyes': '😍',
+	neutral: '😐',
+	sleepy: '😪',
+	sad: '😞',
+	smiling: '😄',
+	'tongue-out': '😛',
+	tired: '😩',
+	surprised: '😮',
+	wink: '😉',
+}

package/src/popup/popup.js

@@ -918,6 +918,17 @@ export default class Popup extends Com {
 		let $imgs = sb.map(page.components, (com, i) => {
 			if (com.type === 'image') return this.renderImageComponent(com, i)
 		})
+
+    // fix bug image only popup has white block
+		let formComponents = sb.filter(page.components, (com) => com.type !== 'image')
+		if (!formComponents.length) {
+			formcss.background = 'transparent'
+			formcss.padding_top = '0'
+			formcss.padding_bottom = '0'
+			formcss.padding_left = '0'
+			formcss.padding_right = '0'
+		}
+
 		return (
 			<div class='overlay' style={overlaystyle}>
 				<div class={animation} style={this.js2css(containercss)} onClick={(e) => e.stopPropagation()}>

package/src/store/store.js

@@ -704,7 +704,7 @@ export default class Store {
 			sb.map(pongs, (pong) => {
 				if (pong.member_id == user.id && pong.type === 'seen') {
 					let mem = sb.find(convo.members, (mem) => mem.id === user.id)
-					mem.seen_at = pong.created
+					if (mem) mem.seen_at = pong.created
 				}
 			})
 			this.chain.put(cid, oldev.id, sb.getMs(oldev.created), oldev)