diff --git a/jam-ui/src/components/client/chat/JKChatComposer.js b/jam-ui/src/components/client/chat/JKChatComposer.js index 8a6dc1f20..0f1550f28 100644 --- a/jam-ui/src/components/client/chat/JKChatComposer.js +++ b/jam-ui/src/components/client/chat/JKChatComposer.js @@ -1,9 +1,11 @@ import React, { useState, useCallback, useMemo } from 'react'; import PropTypes from 'prop-types'; import { useDispatch, useSelector } from 'react-redux'; +import uuid from 'uuid/v1'; import { sendMessage, selectSendStatus, selectSendError, clearSendError } from '../../../store/features/sessionChatSlice'; import { selectSessionId } from '../../../store/features/activeSessionSlice'; import { useJamServerContext } from '../../../context/JamServerContext'; +import { useAuth } from '../../../context/UserAuth'; /** * JKChatComposer - Message composition component @@ -37,6 +39,9 @@ const JKChatComposer = ({ textareaRef }) => { // WebSocket connection status const { isConnected } = useJamServerContext(); + // Current user for optimistic updates + const { currentUser } = useAuth(); + // Validation and state calculations const trimmedText = useMemo(() => inputText.trim(), [inputText]); const charCount = inputText.length; @@ -71,20 +76,23 @@ const JKChatComposer = ({ textareaRef }) => { }, []); const handleSend = useCallback(async () => { - if (!canSend) return; + if (!canSend || !currentUser) return; - // Send message via Redux thunk + // Send message via Redux thunk with optimistic update parameters await dispatch( sendMessage({ channel: sessionId, sessionId, - message: trimmedText + message: trimmedText, + optimisticId: uuid(), + userId: currentUser.id, + userName: currentUser.name }) ); // Clear input on success setInputText(''); - }, [canSend, dispatch, sessionId, trimmedText]); + }, [canSend, dispatch, sessionId, trimmedText, currentUser]); const handleKeyDown = useCallback( e => { diff --git a/jam-ui/src/store/features/sessionChatSlice.js b/jam-ui/src/store/features/sessionChatSlice.js index 4bd68f2d4..1e4db7e09 100644 --- a/jam-ui/src/store/features/sessionChatSlice.js +++ b/jam-ui/src/store/features/sessionChatSlice.js @@ -289,7 +289,7 @@ const sessionChatSlice = createSlice({ // Replace optimistic message with real one const { channel, optimisticId } = action.meta.arg; - const realMessage = action.payload.message; + const realMessage = action.payload; // API returns message directly, not wrapped const messages = state.messagesByChannel[channel]; if (messages) {