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

front/src/components/structure/message/Composer.vue

@@ -0,0 +1,152 @@
+<script setup>
+import imapAPI from "@/services/imapAPI";
+import store from "@/store/store";
+import StarterKit from "@tiptap/starter-kit";
+import { BubbleMenu, useEditor, EditorContent, FloatingMenu } from "@tiptap/vue-3";
+import { inject, onBeforeUnmount } from "vue";
+
+const editor = useEditor({
+    extensions: [StarterKit],
+    content: `
+          <p>
+            Try to select <em>this text</em> to see what we call the bubble menu.
+          </p>
+          <p>
+            Neat, isn't it? Add an empty paragraph to see the floating menu.
+          </p>
+        `,
+});
+
+const room = inject("room");
+
+const send = () => {
+    const htmlContent = editor.value.getHTML();
+    const textContent = editor.value.getText();
+    const accountUser = store.getters.accountOfRoom(room.value.id);
+    imapAPI.reponseEmail({
+        user: accountUser,
+        roomId: room.value.id,
+        text: textContent,
+        html: htmlContent,
+    });
+};
+</script>
+
+<template>
+    <div v-if="editor">
+        <bubble-menu class="bubble-menu" :tippy-options="{ duration: 100 }" :editor="editor">
+            <button
+                @click="editor.chain().focus().toggleBold().run()"
+                :class="{ 'is-active': editor.isActive('bold') }"
+            >
+                Bold
+            </button>
+            <button
+                @click="editor.chain().focus().toggleItalic().run()"
+                :class="{ 'is-active': editor.isActive('italic') }"
+            >
+                Italic
+            </button>
+            <button
+                @click="editor.chain().focus().toggleStrike().run()"
+                :class="{ 'is-active': editor.isActive('strike') }"
+            >
+                Strike
+            </button>
+        </bubble-menu>
+
+        <floating-menu class="floating-menu" :tippy-options="{ duration: 100 }" :editor="editor">
+            <button
+                @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
+                :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
+            >
+                H1
+            </button>
+            <button
+                @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
+                :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
+            >
+                H2
+            </button>
+            <button
+                @click="editor.chain().focus().toggleBulletList().run()"
+                :class="{ 'is-active': editor.isActive('bulletList') }"
+            >
+                Bullet List
+            </button>
+        </floating-menu>
+    </div>
+
+    <editor-content class="editor" :editor="editor" />
+
+    <div class="send" @click="send()">SEND</div>
+</template>
+
+<style lang="scss">
+.send:hover {
+    background-color: var(--selected);
+}
+/* Basic editor styles */
+.editor {
+    background-color: var(--secondary-background);
+}
+
+.ProseMirror {
+    > * + * {
+        margin-top: 0.75em;
+    }
+
+    ul,
+    ol {
+        padding: 0 1rem;
+    }
+
+    blockquote {
+        padding-left: 1rem;
+        border-left: 2px solid rgba(#0d0d0d, 0.1);
+    }
+}
+
+.bubble-menu {
+    display: flex;
+    background-color: #0d0d0d;
+    padding: 0.2rem;
+    border-radius: 0.5rem;
+
+    button {
+        border: none;
+        background: none;
+        color: #fff;
+        font-size: 0.85rem;
+        font-weight: 500;
+        padding: 0 0.2rem;
+        opacity: 0.6;
+
+        &:hover,
+        &.is-active {
+            opacity: 1;
+        }
+    }
+}
+
+.floating-menu {
+    display: flex;
+    background-color: #0d0d0d10;
+    padding: 0.2rem;
+    border-radius: 0.5rem;
+
+    button {
+        border: none;
+        background: none;
+        font-size: 0.85rem;
+        font-weight: 500;
+        padding: 0 0.2rem;
+        opacity: 0.6;
+
+        &:hover,
+        &.is-active {
+            opacity: 1;
+        }
+    }
+}
+</style>

front/src/services/imapAPI.ts

@@ -22,4 +22,8 @@ export default {
     removeFlag(data: { mailboxId: number; messageId: number; flag: string }) {
         return API().post(`/mail/removeFlag`, data);
     },
+    reponseEmail(data: { user: string; roomId: number; text: string; html: string }) {
+        console.log(data);
+        return API().post(`/mail/response`, data);
+    },
 };

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 {