start on repond to message (basic input and builder for dm)

front/src/views/room/RoomView.vue

@@ -6,6 +6,7 @@ import { RoomType } from "@/store/models/model";
 import Header from "./Header.vue";
 import Message from "../../components/structure/message/Message.vue";
 import MessageViewModal from "@/components/modals/MessageViewModal.vue";
+import Composer from "@/components/structure/message/Composer.vue";
 
 const store = useStore();
 const route = useRoute();
@@ -31,7 +32,11 @@ onBeforeRouteUpdate(async (to, from) => {
 
 const shouldDisplayComposer = () => {
     if (!room?.value) return false;
-    return room.value.roomType == RoomType.THREAD || room.value.roomType == RoomType.GROUP;
+    return (
+        room.value.roomType == RoomType.THREAD ||
+        room.value.roomType == RoomType.GROUP ||
+        room.value.roomType == RoomType.DM
+    );
 };
 
 function openMessageView(id) {
@@ -55,7 +60,7 @@ provide("room", room);
                     @open-message-view="(id) => openMessageView(id)"
                 />
             </div>
-            <div id="composer" v-if="shouldDisplayComposer()">COMPOSER</div>
+            <Composer class="composer" v-if="shouldDisplayComposer()" />
         </div>
         <MessageViewModal :message="message" :messageId="messageIdView" @close="() => openMessageView(-1)" />
     </div>
@@ -74,14 +79,13 @@ provide("room", room);
     height: 100%;
 }
 
-#composer {
+.composer {
     position: absolute;
     bottom: 0;
     width: 100%;
     padding-top: 10px;
 
     height: 35px;
-    background-color: red;
 }
 
 .content {