Merge pull request #8 from ably/chat-js-0.11

chore: bump chat-js to 0.11

Author: AndyTWF

package-lock.json

@@ -27,7 +27,7 @@
     "prepare": "npm run build",
     "lint": "eslint 'src/**/*.{ts,tsx}'",
     "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix",
-    "format": "prettier --write 'src/**/*.{ts,tsx,css}'",
+    "format": "prettier --list-different --write 'src/**/*.{ts,tsx,css}'",
     "format:check": "prettier --check 'src/**/*.{ts,tsx,css}'",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -52,7 +52,7 @@
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "@ably/chat": "^0.10.0",
+    "@ably/chat": "^0.11.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },

package.json

@@ -126,13 +126,7 @@ export const App = ({ initialRoomNames, width = '70vw', height = '70vh' }: AppPr
       <main className="flex-1 overflow-hidden">
         {/* Render the active chat window if a room is selected, otherwise show empty state */}
         {activeRoom ? (
-          <ChatRoomProvider
-            key={activeRoom}
-            name={activeRoom}
-            attach={false}
-            release={false}
-            options={DEFAULT_ROOM_OPTIONS}
-          >
+          <ChatRoomProvider key={activeRoom} name={activeRoom} options={DEFAULT_ROOM_OPTIONS}>
             <ChatWindow
               roomName={activeRoom}
               customHeaderContent={<RoomInfo />}

src/app/app.tsx

@@ -270,12 +270,7 @@ export const ChatWindow = ({
   className,
   onError,
 }: ChatWindowProps) => {
-  const {
-    deleteMessage,
-    update: updateMessageRemote,
-    sendReaction,
-    deleteReaction,
-  } = useMessages();
+  const { deleteMessage, updateMessage, sendReaction, deleteReaction } = useMessages();
 
   const {
     activeMessages,
@@ -298,7 +293,7 @@ export const ChatWindow = ({
     (msg: Message, newText: string) => {
       const updated = msg.copy({ text: newText, metadata: msg.metadata, headers: msg.headers });
 
-      updateMessageRemote(msg.serial, updated)
+      updateMessage(msg.serial, updated)
         .then(handleRESTMessageUpdate)
         .catch((error: unknown) => {
           if (onError?.onMessageUpdateError) {
@@ -308,7 +303,7 @@ export const ChatWindow = ({
           }
         });
     },
-    [updateMessageRemote, handleRESTMessageUpdate, onError]
+    [updateMessage, handleRESTMessageUpdate, onError]
   );
 
   const handleMessageDelete = useCallback(

src/components/molecules/chat-window.tsx

@@ -144,15 +144,15 @@ export const MessageInput = ({
   const [emojiPickerPosition, setEmojiPickerPosition] = useState({ top: 0, left: 0 });
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const { keystroke, stop } = useTyping();
-  const { send } = useMessages();
+  const { sendMessage } = useMessages();
 
   /**
    * Handles sending the message, clearing the input, and stopping typing indicators
    */
   const handleSend = useCallback(() => {
     const trimmedMessage = messageRef.current.trim();
     if (trimmedMessage) {
-      send({ text: trimmedMessage })
+      sendMessage({ text: trimmedMessage })
         .then((sentMessage) => {
           onSent?.(sentMessage);
           setMessage('');
@@ -171,7 +171,7 @@ export const MessageInput = ({
           }
         });
     }
-  }, [send, stop, onSent, onSendError, enableTyping]);
+  }, [sendMessage, stop, onSent, onSendError, enableTyping]);
 
   /**
    * Handles changes to the input field

src/components/molecules/message-input.tsx

@@ -188,7 +188,7 @@ export const RoomReaction = ({
 
   const throttledHandleIncomingReaction = useThrottle(handleIncomingReaction, 200);
 
-  const { send } = useRoomReactions({
+  const { sendRoomReaction } = useRoomReactions({
     listener: throttledHandleIncomingReaction,
   });
 
@@ -219,22 +219,22 @@ export const RoomReaction = ({
    *
    * @param emoji - The emoji reaction to send to the room
    */
-  const sendRoomReaction = useCallback(
+  const sendReactionToRoom = useCallback(
     (emoji: string): void => {
-      send({ name: emoji }).catch((error: unknown) => {
+      sendRoomReaction({ name: emoji }).catch((error: unknown) => {
         if (onError?.onSendRoomReactionError) {
           onError.onSendRoomReactionError(error as ErrorInfo, emoji);
         } else {
           console.error('Failed to send room reaction:', error);
         }
       });
     },
-    [send, onError]
+    [sendRoomReaction, onError]
   );
 
   // Create throttled version of the send function to avoid excessive network calls
   // Limits to maximum 1 reaction per 200ms while preserving immediate visual feedback
-  const throttledSendReaction = useThrottle(sendRoomReaction, 200);
+  const throttledSendReaction = useThrottle(sendReactionToRoom, 200);
 
   /**
    * Handles sending a room reaction with immediate visual feedback and throttled network call.

src/components/molecules/room-reaction.tsx

@@ -12,19 +12,19 @@ import { ChatWindowFooterProps } from '../../../components/molecules/chat-window
 import { ChatWindowHeaderProps } from '../../../components/molecules/chat-window-header.tsx';
 import { MessageInputProps } from '../../../components/molecules/message-input.tsx';
 
-const mockSend = vi.fn().mockResolvedValue({});
+const mockSendMessage = vi.fn().mockResolvedValue({});
 const mockDeleteMessage = vi.fn().mockResolvedValue({});
-const mockUpdate = vi.fn().mockResolvedValue({});
+const mockUpdateMessage = vi.fn().mockResolvedValue({});
 const mockSendReaction = vi.fn().mockResolvedValue({});
 const mockDeleteReaction = vi.fn().mockResolvedValue({});
 
 // Mock the Ably Chat hooks
 vi.mock('@ably/chat/react', () => ({
   useChatClient: () => ({ clientId: 'test-user' }),
   useMessages: (): Partial<UseMessagesResponse> => ({
-    send: mockSend,
+    sendMessage: mockSendMessage,
     deleteMessage: mockDeleteMessage,
-    update: mockUpdate,
+    updateMessage: mockUpdateMessage,
     sendReaction: mockSendReaction,
     deleteReaction: mockDeleteReaction,
   }),
@@ -283,7 +283,7 @@ describe('ChatWindow', () => {
     fireEvent.click(screen.getByTestId('edit-message-button'));
 
     // Check if the update function was called
-    expect(mockUpdate).toHaveBeenCalled();
+    expect(mockUpdateMessage).toHaveBeenCalled();
   });
 
   it('deletes a message when delete button is clicked', () => {
@@ -352,7 +352,7 @@ describe('ChatWindow', () => {
 
   describe('Error Handling', () => {
     it('calls onMessageUpdateError when message editing fails', async () => {
-      mockUpdate.mockRejectedValueOnce(new ErrorInfo('Edit failed', 50000, 500));
+      mockUpdateMessage.mockRejectedValueOnce(new ErrorInfo('Edit failed', 50000, 500));
 
       let errorInfo: ErrorInfo | undefined;
 
@@ -461,7 +461,7 @@ describe('ChatWindow', () => {
 
     it('falls back to console.error when no error handlers are provided', async () => {
       const consoleSpy = vi.spyOn(console, 'error');
-      mockUpdate.mockRejectedValueOnce(new Error('Edit failed'));
+      mockUpdateMessage.mockRejectedValueOnce(new Error('Edit failed'));
 
       render(<ChatWindow roomName="general" />);
 

src/test/components/molecules/chat-window.test.tsx

@@ -10,9 +10,9 @@ import { EmojiPickerProps } from '../../../components/molecules/emoji-picker.tsx
 import { MessageInput } from '../../../components/molecules/message-input.tsx';
 
 // Mocks the useTyping hook
-const mockSend = vi.fn().mockResolvedValue({});
+const mockSendMessage = vi.fn().mockResolvedValue({});
 const mockDeleteMessage = vi.fn().mockResolvedValue({});
-const mockUpdate = vi.fn().mockResolvedValue({});
+const mockUpdateMessage = vi.fn().mockResolvedValue({});
 const mockSendReaction = vi.fn().mockResolvedValue({});
 const mockDeleteReaction = vi.fn().mockResolvedValue({});
 
@@ -22,9 +22,9 @@ vi.mock('@ably/chat/react', () => ({
     stop: vi.fn().mockReturnValue(Promise.resolve()),
   }),
   useMessages: (): Partial<UseMessagesResponse> => ({
-    send: mockSend,
+    sendMessage: mockSendMessage,
     deleteMessage: mockDeleteMessage,
-    update: mockUpdate,
+    updateMessage: mockUpdateMessage,
     sendReaction: mockSendReaction,
     deleteReaction: mockDeleteReaction,
   }),
@@ -185,7 +185,7 @@ describe('MessageInput', () => {
     fireEvent.keyDown(input, { key: 'Enter' });
 
     await waitFor(() => {
-      expect(mockSend).toHaveBeenCalledWith({ text: 'Hello, world!' });
+      expect(mockSendMessage).toHaveBeenCalledWith({ text: 'Hello, world!' });
       expect(input).toHaveValue('');
     });
   });

src/test/components/molecules/message-input.test.tsx

@@ -13,7 +13,7 @@ vi.mock('@ably/chat/react', () => ({
   useRoomReactions: vi.fn().mockReturnValue({
     roomStatus: RoomStatus.Attached,
     connectionStatus: ConnectionStatus.Connected,
-    send: vi.fn().mockResolvedValue({}),
+    sendRoomReaction: vi.fn().mockResolvedValue({}),
   } as Partial<UseRoomReactionsResponse>),
 }));
 
@@ -99,7 +99,7 @@ Object.defineProperty(navigator, 'vibrate', {
 });
 
 describe('RoomReaction', () => {
-  const mockSend = vi.fn().mockResolvedValue({});
+  const mockSendRoomReaction = vi.fn().mockResolvedValue({});
 
   beforeEach(() => {
     vi.clearAllMocks();
@@ -133,15 +133,15 @@ describe('RoomReaction', () => {
     (useRoomReactions as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
       roomStatus: RoomStatus.Attached,
       connectionStatus: ConnectionStatus.Connected,
-      send: mockSend,
+      sendRoomReaction: mockSendRoomReaction,
     });
 
     render(<RoomReaction />);
 
     // Click the reaction button
     fireEvent.click(screen.getByRole('button'));
 
-    expect(mockSend).toHaveBeenCalledWith({ name: '👍' });
+    expect(mockSendRoomReaction).toHaveBeenCalledWith({ name: '👍' });
 
     // Check if emoji burst is shown
     expect(screen.getByTestId('emoji-burst')).toBeInTheDocument();
@@ -188,7 +188,7 @@ describe('RoomReaction', () => {
     (useRoomReactions as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
       roomStatus: RoomStatus.Attached,
       connectionStatus: ConnectionStatus.Connected,
-      send: mockSend,
+      sendRoomReaction: mockSendRoomReaction,
     });
 
     render(<RoomReaction />);
@@ -206,7 +206,7 @@ describe('RoomReaction', () => {
     expect(screen.queryByTestId('emoji-wheel')).not.toBeInTheDocument();
 
     // Check if the selected emoji was sent
-    expect(mockSend).toHaveBeenCalledWith({ name: '❤️' });
+    expect(mockSendRoomReaction).toHaveBeenCalledWith({ name: '❤️' });
 
     // Check if emoji burst is shown with the selected emoji
     expect(screen.getByTestId('emoji-burst')).toBeInTheDocument();
@@ -279,7 +279,7 @@ describe('RoomReaction', () => {
         return {
           roomStatus: RoomStatus.Attached,
           connectionStatus: ConnectionStatus.Connected,
-          send: mockSend,
+          sendRoomReaction: mockSendRoomReaction,
         };
       }
     );
@@ -322,7 +322,7 @@ describe('RoomReaction', () => {
         return {
           roomStatus: RoomStatus.Attached,
           connectionStatus: ConnectionStatus.Connected,
-          send: mockSend,
+          sendRoomReaction: mockSendRoomReaction,
         };
       }
     );
@@ -436,7 +436,7 @@ describe('RoomReaction', () => {
     (useRoomReactions as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
       roomStatus: RoomStatus.Attached,
       connectionStatus: ConnectionStatus.Connected,
-      send: mockSendFailure,
+      sendRoomReaction: mockSendFailure,
     });
 
     render(<RoomReaction onError={{ onSendRoomReactionError: mockOnSendRoomReactionError }} />);
@@ -462,7 +462,7 @@ describe('RoomReaction', () => {
     (useRoomReactions as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
       roomStatus: RoomStatus.Attached,
       connectionStatus: ConnectionStatus.Connected,
-      send: mockSendFailure,
+      sendRoomReaction: mockSendFailure,
     });
 
     render(<RoomReaction />);

src/test/components/molecules/room-reaction.test.tsx

@@ -116,8 +116,8 @@ const createMockPaginatedResult = (
 const createMockUseMessagesResponse = (
   overrides: Partial<UseMessagesResponse> = {}
 ): UseMessagesResponse => ({
-  send: vi.fn(),
-  update: vi.fn(),
+  sendMessage: vi.fn(),
+  updateMessage: vi.fn(),
   history: vi.fn(),
   deleteMessage: vi.fn(),
   sendReaction: vi.fn(),