// Message handling hook for chat component import { useAgentChatStore } from '@/pages/Agent/store/agentChatStore'; import { KeyboardEvent, useCallback, useState } from 'react'; import { useShallow } from 'zustand/react/shallow'; interface UseMessageHandlingProps { agentId: string | undefined; isUserAtBottom: () => boolean; isUserAtBottomReference: React.RefObject; debouncedScrollToBottom: () => void; } /** * Custom hook for handling message operations in chat interfaces * Directly uses the agent store to reduce prop drilling and potential bugs */ export function useMessageHandling({ agentId, isUserAtBottom, isUserAtBottomReference, debouncedScrollToBottom, }: UseMessageHandlingProps) { // Get agent and sendMessage function directly from the store using useShallow // to prevent unnecessary re-renders const { sendMessage, agent } = useAgentChatStore( useShallow((state) => ({ sendMessage: state.sendMessage, agent: state.agent, })), ); const [message, setMessage] = useState(''); const [parametersOpen, setParametersOpen] = useState(false); const [sendingMessage, setSendingMessage] = useState(false); /** * Handle opening parameter dialog */ const handleOpenParameters = useCallback(() => { setParametersOpen(true); }, []); /** * Handle message input changes */ const handleMessageChange = useCallback((event: React.ChangeEvent) => { setMessage(event.target.value); }, []); /** * Handle sending a message */ const handleSendMessage = useCallback(async () => { if (!message.trim() || !agent || sendingMessage || !agentId) return; // Store the current scroll position status before sending message const wasAtBottom = isUserAtBottom(); setSendingMessage(true); try { await sendMessage(message); setMessage(''); // After sending, update the scroll position reference to ensure proper scrolling isUserAtBottomReference.current = wasAtBottom; // If user was at bottom when sending message, scroll to bottom with debounce if (wasAtBottom) { debouncedScrollToBottom(); } } finally { setSendingMessage(false); } }, [message, agent, sendingMessage, agentId, isUserAtBottom, sendMessage, debouncedScrollToBottom, isUserAtBottomReference]); /** * Handle keyboard events for sending messages */ const handleKeyPress = useCallback( (event: KeyboardEvent) => { if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); void handleSendMessage(); } }, [handleSendMessage], ); return { message, parametersOpen, sendingMessage, setParametersOpen, handleOpenParameters, handleMessageChange, handleSendMessage, handleKeyPress, }; }