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) {

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;
@@ -60,3 +61,29 @@ export const useMessageStore = defineStore("message", {
     }
   }
 });
+
+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);
+  }
+})

src/repositories/message.rs

@@ -1,6 +1,7 @@
+use super::types::MessageFilter;
 use crate::models::message;
 use crate::repositories::{AnyResult, RepositoryContext};
-use sea_orm::{ActiveModelTrait, ColumnTrait, EntityTrait, QueryFilter};
+use sea_orm::{ActiveModelTrait, ColumnTrait, EntityTrait, QueryFilter, QueryOrder, QuerySelect};
 use std::sync::Arc;
 
 #[derive(Clone, Debug)]
@@ -19,6 +20,24 @@ impl MessageRepository {
             .await?)
     }
 
+    pub async fn filter(&self, filter: MessageFilter) -> AnyResult<Vec<message::Model>> {
+        let mut query = message::Entity::find();
+
+        if let Some(channel_id) = filter.channel_id {
+            query = query.filter(message::Column::ChannelId.eq(channel_id));
+        }
+
+        if let Some(before_id) = filter.before_id {
+            query = query.filter(message::Column::Id.lt(before_id));
+        }
+
+        if let Some(limit) = filter.limit {
+            query = query.order_by_desc(message::Column::Id).limit(limit);
+        }
+
+        Ok(query.all(&self.context.db).await?)
+    }
+
     pub async fn get_by_channel(&self, channel_id: uuid::Uuid) -> AnyResult<Vec<message::Model>> {
         Ok(message::Entity::find()
             .filter(message::Column::ChannelId.eq(channel_id))

src/repositories/types.rs

@@ -18,3 +18,9 @@ impl ServerExplorerItem {
 pub struct ServerTree {
     pub items: Vec<ServerExplorerItem>,
 }
+
+pub struct MessageFilter {
+    pub channel_id: Option<uuid::Uuid>,
+    pub before_id: Option<uuid::Uuid>,
+    pub limit: Option<u64>,
+}

src/routes/message/dto.rs

@@ -27,6 +27,18 @@ pub struct UpdateMessageRequest {
 }
 
 #[derive(serde::Deserialize, utoipa::IntoParams)]
-pub struct MessageFilters {
+pub struct MessageQueryParams {
     pub channel_id: Option<uuid::Uuid>,
+    pub before_id: Option<Uuid>,
+    pub limit: Option<u64>,
+}
+
+impl Default for MessageQueryParams {
+    fn default() -> Self {
+        Self {
+            channel_id: None,
+            before_id: None,
+            limit: Some(50),
+        }
+    }
 }

src/routes/message/handlers.rs

@@ -1,4 +1,4 @@
-use super::dto::{CreateMessageRequest, MessageFilters, MessageResponse, UpdateMessageRequest};
+use super::dto::{CreateMessageRequest, MessageQueryParams, MessageResponse, UpdateMessageRequest};
 use crate::core::state::AppState;
 use crate::http::context::CurrentUser;
 use crate::http::error::HTTPError;
@@ -19,23 +19,16 @@ use uuid::Uuid;
         (status = 500, description = "Erreur interne du serveur")
     ),
     params(
-        MessageFilters
+        MessageQueryParams
     ),
     tag = "Messages"
 )]
 pub async fn get_all(
     State(state): State<AppState>,
-    Query(filters): Query<MessageFilters>,
+    Query(filters): Query<MessageQueryParams>,
 ) -> Result<Json<Vec<MessageResponse>>, HTTPError> {
-    let messages = if let Some(channel_id) = filters.channel_id {
+    let params = mapper::query_params_to_message_filter(filters);
-        state
+    let messages = state.repositories.message.filter(params).await?;
-            .repositories
-            .message
-            .get_by_channel(channel_id)
-            .await?
-    } else {
-        state.repositories.message.get_all().await?
-    };
     Ok(Json(
         messages
             .into_iter()

src/routes/message/mapper.rs

@@ -1,5 +1,8 @@
 use crate::models::message;
-use crate::routes::message::dto::{CreateMessageRequest, MessageResponse, UpdateMessageRequest};
+use crate::repositories::types::MessageFilter;
+use crate::routes::message::dto::{
+    CreateMessageRequest, MessageQueryParams, MessageResponse, UpdateMessageRequest,
+};
 use chrono::Utc;
 use sea_orm::Set;
 use uuid::Uuid;
@@ -42,3 +45,11 @@ pub fn update_request_to_am(
         reply_to_id: Set(model.reply_to_id),
     }
 }
+
+pub fn query_params_to_message_filter(params: MessageQueryParams) -> MessageFilter {
+    MessageFilter {
+        channel_id: params.channel_id,
+        before_id: params.before_id,
+        limit: params.limit,
+    }
+}