This commit is contained in:
2026-07-05 20:02:45 +02:00
parent 24d40e4de0
commit 30d928ddde
9 changed files with 145 additions and 28 deletions
+32 -8
View File
@@ -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) {
+19
View File
@@ -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);
}
+7 -1
View File
@@ -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() {
+28 -1
View File
@@ -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);
}
})
+20 -1
View File
@@ -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))
+6
View File
@@ -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>,
}
+13 -1
View File
@@ -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),
}
}
}
+5 -12
View File
@@ -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 {
state
.repositories
.message
.get_by_channel(channel_id)
.await?
} else {
state.repositories.message.get_all().await?
};
let params = mapper::query_params_to_message_filter(filters);
let messages = state.repositories.message.filter(params).await?;
Ok(Json(
messages
.into_iter()
+12 -1
View File
@@ -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,
}
}