init

frontend/src/pages/server/channel/index.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import MarkdownIt from 'markdown-it'
-import {computed, onMounted, ref, watch} from 'vue';
+import {computed, nextTick, onMounted, ref, watch} from 'vue';
 import {useRoute} from 'vue-router';
-import {storeToRefs} from 'pinia'; // Import crucial
+import {storeToRefs} from 'pinia';
 import {useMessageStore} from '@/stores/message';
 
 const props = defineProps<{
@@ -15,6 +15,9 @@ const channelId = computed(() => props.channelId);
 const route = useRoute();
 const messageStore = useMessageStore();
 
+// Référence vers l'élément scrollable
+const messageContainer = ref<HTMLElement | null>(null);
+
 // "messages" ici est une référence réactive liée au store
 const {messages, loading} = storeToRefs(messageStore);
 
@@ -30,6 +33,13 @@ const renderMarkdown = (content: string) => {
   return md.render(content);
 };
 
+const scrollToBottom = async () => {
+  await nextTick();
+  if (messageContainer.value) {
+    messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
+  }
+};
+
 const sendMessage = async () => {
   if (!newMessage.value.trim()) return;
 
@@ -38,21 +48,28 @@ const sendMessage = async () => {
   try {
     await messageStore.sendMessage(channelId.value, content);
     newMessage.value = ''; // On vide le champ après succès
+    await scrollToBottom();
   } catch (e) {
     // Gérer l'erreur (ex: notification toast)
   }
 };
 
 onMounted(() => {
-  if (channelId) {
+  if (channelId.value) {
     messageStore.fetchMessages(channelId.value);
   }
 });
+
 watch(channelId, (newChannelId) => {
   if (newChannelId) {
     messageStore.fetchMessages(newChannelId);
   }
 }, {immediate: true})
+
+// Scroll automatique quand la liste des messages change (nouveaux messages reçus)
+watch(messages, () => {
+  scrollToBottom();
+}, {deep: true});
 </script>
 
 <template>
@@ -60,7 +77,10 @@ watch(channelId, (newChannelId) => {
   <v-container class="pa-0 fill-height d-flex flex-column" fluid>
 
     <!-- Zone des messages (scrollable) -->
-    <v-responsive class="flex-grow-1 overflow-y-auto">
+    <div
+      ref="messageContainer"
+      class="flex-grow-1 overflow-y-auto w-100 message-container"
+    >
       <v-list bg-color="transparent" lines="three">
         <v-list-item
           v-for="msg in messages"
@@ -69,7 +89,6 @@ watch(channelId, (newChannelId) => {
         >
           <template v-slot:prepend>
             <v-avatar color="grey-lighten-2" size="40">
-              <!--              <v-img v-if="msg.user.avatar" :src="msg.user.avatar"></v-img>-->
               <v-icon icon="mdi-account"></v-icon>
             </v-avatar>
           </template>
@@ -84,10 +103,10 @@ watch(channelId, (newChannelId) => {
           </v-list-item-subtitle>
         </v-list-item>
       </v-list>
-    </v-responsive>
+    </div>
 
     <!-- Zone de saisie fixe en bas -->
-    <v-sheet class="pa-4" width="100%">
+    <v-sheet class="pa-4 flex-shrink-0" width="100%">
       <v-textarea
         v-model="newMessage"
         auto-grow
@@ -117,8 +136,13 @@ watch(channelId, (newChannelId) => {
 </template>
 
 <style scoped>
+.message-container {
+  /* Assure que la zone gère son scroll indépendamment */
+  height: 0;
+}
+
 .markdown-content :deep(p) {
-  margin-bottom: 0; /* Évite les marges inutiles dans le chat */
+  margin-bottom: 0;
 }
 
 .markdown-content :deep(code) {
@@ -136,4 +160,4 @@ watch(channelId, (newChannelId) => {
   margin: 8px 0;
   overflow-x: auto;
 }
-</style>
+</style>

frontend/src/plugins/events.ts

@@ -0,0 +1,19 @@
+export const bus = new EventTarget();
+
+export function emitGatewayEvent(namespace: string, action: string, content: any) {
+  // On construit le nom de l'événement de manière cohérente : gateway:message
+  const eventName = `gateway:${namespace.toLowerCase()}`;
+  bus.dispatchEvent(new CustomEvent(eventName, {detail: {action, content}}));
+}
+
+export function onGatewayEvent(namespace: string, callback: (payload: { action: string, content: any }) => void) {
+  const eventName = `gateway:${namespace.toLowerCase()}`;
+  const wrapper = (e: Event) => {
+    const customEvent = e as CustomEvent;
+    callback(customEvent.detail);
+  };
+  bus.addEventListener(eventName, wrapper);
+
+  // Retourne une fonction pour se désabonner facilement si besoin
+  return () => bus.removeEventListener(eventName, wrapper);
+}

frontend/src/stores/gateway.ts

@@ -1,5 +1,6 @@
 import {defineStore} from 'pinia';
 import {useAppStore} from "@/stores/app.ts";
+import {emitGatewayEvent} from "@/plugins/events.ts";
 
 type GatewayStatus = 'disconnected' | 'connecting' | 'connected' | 'error'
 
@@ -81,7 +82,12 @@ export const useGatewayStore = defineStore('gateway', {
     },
 
     async handleMessage(rawData: string) {
-      console.log("[ws]message received", rawData)
+      try {
+        const data = JSON.parse(rawData)
+        emitGatewayEvent(data.namespace, data.action, data.content)
+      } catch (error) {
+        console.error('Error parsing WebSocket message:', error)
+      }
     },
 
     async scheduleReconnect() {

frontend/src/stores/message.ts

@@ -1,5 +1,6 @@
 import {defineStore} from "pinia";
 import {useApi} from "@/composables/useApi.ts";
+import {onGatewayEvent} from "@/plugins/events.ts";
 
 interface Message {
   id: string;
@@ -49,7 +50,7 @@ export const useMessageStore = defineStore("message", {
         const newMessage = await response.json();
 
         // Ajout local immédiat (optimistic update)
-        this.messages.push(newMessage);
+        // this.messages.push(newMessage);
       } catch (error) {
         console.error("Erreur lors de l'envoi du message:", error);
         throw error;
@@ -59,4 +60,30 @@ export const useMessageStore = defineStore("message", {
       this.messages = [];
     }
   }
-});
+});
+
+onGatewayEvent("Message", (payload) => {
+  const store = useMessageStore();
+  switch (payload.action) {
+    case "add":
+      const exists = store.messages.some(m => m.id === payload.content.id);
+      if (!exists) {
+        store.messages.push(payload.content);
+      }
+      break;
+    case "update":
+      const updateIndex = store.messages.findIndex(m => m.id === payload.content.id);
+      if (updateIndex !== -1) {
+        store.messages[updateIndex] = payload.content;
+      }
+      break;
+    case "remove":
+      const removeIndex = store.messages.findIndex(m => m.id === payload.content);
+      if (removeIndex !== -1) {
+        store.messages.splice(removeIndex, 1);
+      }
+      break;
+    default:
+      console.warn("Action non gérée :", payload.action);
+  }
+})