Added attachment support

src/app/chat/elements/masonry/masonry.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

src/app/chat/elements/masonry/masonry.scss

@@ -0,0 +1,12 @@
+:host {
+  display: grid;
+  gap: 4px;
+  height: 100%;
+
+  img {
+    display: block;
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+}

src/app/chat/elements/masonry/masonry.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Masonry } from './masonry';
+
+describe('Masonry', () => {
+  let component: Masonry;
+  let fixture: ComponentFixture<Masonry>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Masonry],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Masonry);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/chat/elements/masonry/masonry.ts

@@ -0,0 +1,28 @@
+import {AfterViewChecked, AfterViewInit, Component, ElementRef, inject, input, ViewChild} from '@angular/core';
+
+@Component({
+  selector: 'masonry',
+  imports: [],
+  templateUrl: './masonry.html',
+  styleUrl: './masonry.scss',
+})
+export class Masonry implements AfterViewInit {
+  host = inject(ElementRef)
+
+  maxColSize = input<number>(4)
+
+  ngAfterViewInit() {
+    const elements = this.host.nativeElement.children.length
+    switch (elements) {
+      case 1:
+        this.host.nativeElement.style.gridTemplateColumns = "1fr";
+        break
+      case 3:
+        this.host.nativeElement.style.gridTemplateColumns = "repeat(2, 1fr)";
+        this.host.nativeElement.children[2].style.gridColumn = "1 / -1";
+        break
+      default:
+        this.host.nativeElement.style.gridTemplateColumns = `repeat(${this.maxColSize()}, 1fr)`;
+    }
+  }
+}