diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
index 5946f3f02..51bbb8e06 100644
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -17,6 +17,7 @@ import ActivityBubble from './bubbles/Activity.vue';
import ImageBubble from './bubbles/Image.vue';
import FileBubble from './bubbles/File.vue';
import AudioBubble from './bubbles/Audio.vue';
+import AttachmentsBubble from './bubbles/Attachments.vue';
import MessageError from './MessageError.vue';
import MessageMeta from './MessageMeta.vue';
@@ -219,6 +220,10 @@ const componentToRender = computed(() => {
if (fileType === ATTACHMENT_TYPES.AUDIO) return AudioBubble;
}
+ if (props.attachments.length > 1 && !props.content) {
+ return AttachmentsBubble;
+ }
+
return TextBubble;
});
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Attachments.vue b/app/javascript/dashboard/components-next/message/bubbles/Attachments.vue
new file mode 100644
index 000000000..d3cfb6c1d
--- /dev/null
+++ b/app/javascript/dashboard/components-next/message/bubbles/Attachments.vue
@@ -0,0 +1,86 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Text.vue b/app/javascript/dashboard/components-next/message/bubbles/Text.vue
index b0d2c60d4..491d40e64 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Text.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Text.vue
@@ -70,9 +70,9 @@ const files = computed(() => {
-
+
-
+
{
/>
-
+
{
:attachment="attachment"
/>
-