diff --git a/packages/rocketchat-message-attachments/client/messageAttachment.html b/packages/rocketchat-message-attachments/client/messageAttachment.html
index 7b3369edeb975..bb69377bf4b6e 100644
--- a/packages/rocketchat-message-attachments/client/messageAttachment.html
+++ b/packages/rocketchat-message-attachments/client/messageAttachment.html
@@ -155,6 +155,33 @@
{{/if}}
{{/unless}}
+ {{#if actions}}
+ {{#each actions}}
+
+ {{#if isButton}}
+ {{#if imageUrl}}
+
+
+
+ {{/if}}
+ {{#if text}}
+ {{#if url}}
+
+ {{text}}
+
+ {{/if}}
+ {{#if msg}}
+
+
+ {{/if}}
+ {{/if}}
+ {{/if}}
+
+ {{/each}}
+ {{/if}}
+
{{#each attachments}}
{{injectIndex . ../index @index}} {{> messageAttachment}}
{{/each}}
diff --git a/packages/rocketchat-message-attachments/client/messageAttachment.js b/packages/rocketchat-message-attachments/client/messageAttachment.js
index 37acc16c00bae..29c82a39f1d5f 100644
--- a/packages/rocketchat-message-attachments/client/messageAttachment.js
+++ b/packages/rocketchat-message-attachments/client/messageAttachment.js
@@ -61,5 +61,20 @@ Template.messageAttachment.helpers({
isFile() {
return this.type === 'file';
+ },
+
+ isButton() {
+ return this.type === 'button';
}
});
+
+Template.messageAttachment.events({
+
+ 'click .button-send'() {
+ console.log('button');
+ }
+});
+
+// function sendMessage() {
+// console.log('sendMessage');
+// }
diff --git a/packages/rocketchat-message-attachments/client/stylesheets/messageAttachments.css b/packages/rocketchat-message-attachments/client/stylesheets/messageAttachments.css
index 446b8b41b6924..79f30b1093c9e 100644
--- a/packages/rocketchat-message-attachments/client/stylesheets/messageAttachments.css
+++ b/packages/rocketchat-message-attachments/client/stylesheets/messageAttachments.css
@@ -135,4 +135,46 @@ html.rtl .attachment {
border-width: 1px;
border-radius: 5px;
}
+
+ & .action {
+ margin-top: 6px;
+ }
+
+ & .text-button {
+ color: #2c2d30;
+ min-width: 0;
+ max-width: 220px;
+ padding: 0 10px;
+ margin: 2px 8px 2px 0;
+ vertical-align: middle;
+ font-size: 13px;
+ height: 28px;
+ background: rgb(250, 250, 250);
+ font-weight: 500;
+ text-decoration: none;
+ user-select: none;
+ outline: none;
+ cursor: pointer;
+ border: 2px solid lightgray;
+ border-radius: 4px;
+ align-items: center;
+ position: relative;
+ display: inline-flex;
+ justify-content: center;
+ text-align: center;
+ white-space: nowrap;
+ -webkit-appearance: none;
+ -webkit-tap-highlight-color: transparent;
+ }
+
+ & .overflow-ellipsis {
+ display: block;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ }
+
+ & .image-button {
+ max-height: 200px;
+ }
}