Start implementing direct messaging and continued developing the chatnav

src/app/chat/elements/message-box/message-box.html

@@ -0,0 +1,7 @@
+<div id="message-box">
+  <div></div>
+  <div class="items-middle">
+    <textarea></textarea>
+  </div>
+  <div></div>
+</div>

src/app/chat/elements/message-box/message-box.scss

@@ -0,0 +1,29 @@
+:host {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  #message-box {
+    width: 60%;
+    background: var(--tui-background-base-alt);
+    height: 75px;
+    border-radius: 200px;
+    border: 2px solid var(--tui-border-normal);
+    display: grid;
+    grid-template-columns: 10% 80% 10%;
+    align-items: center;
+    padding: 0 10px;
+
+    .items-middle {
+      textarea {
+        width: 100%;
+        height: 100%;
+        background: transparent;
+        border: none;
+        outline: none;
+        resize: none;
+        color: var(--tui-text-01);
+      }
+    }
+  }
+}

src/app/chat/elements/message-box/message-box.spec.ts

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

src/app/chat/elements/message-box/message-box.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import {TuiAppearance} from '@taiga-ui/core';
+
+@Component({
+  selector: 'message-box',
+  imports: [
+    TuiAppearance
+  ],
+  templateUrl: './message-box.html',
+  styleUrl: './message-box.scss',
+})
+export class MessageBox {}