Change to Ably Chat SDK

[kavalerov]

This pull request refactors the chat components to use the new @ably/chat library, replacing the older ably/react integration. It also includes several improvements to the code structure and functionality, such as migrating to useRef for managing DOM elements, updating the message handling logic, and enhancing keyboard interaction. Additionally, the package.json file is updated to include the new dependency.

Migration to @ably/chat:

• components/Chat.jsx: Replaced AblyProvider and ChannelProvider with ChatClientProvider and ChatRoomProvider from @ably/chat/react. Introduced a new ChatClient instance and configured room options for message history.
• components/ChatBox.jsx: Replaced useChannel with useMessages from @ably/chat/react for handling message sending and receiving. Updated the message listener and sending logic to align with the new API.

Code structure improvements:

• components/ChatBox.jsx: Replaced mutable DOM element variables (inputBox, messageEnd) with useRef for better React practices. Updated useEffect to handle smooth scrolling using messageEndRef. [1] [2]

Enhanced message handling:

• components/ChatBox.jsx: Improved message mapping by using message.id as a key when available. Updated the message data structure to use message.text instead of message.data.

Keyboard interaction improvements:

• components/ChatBox.jsx: Modified handleKeyPress to prevent sending messages when the "Enter" key is pressed with the Shift key held, enabling multi-line input.

Dependency updates:

• package.json: Added @ably/chat version ^0.6.0 and upgraded ably to version 2.8.0 to support the new chat functionality.

[vercel]

@kavalerov is attempting to deploy a commit to the ably Team on Vercel.

A member of the Team first needs to authorize it.

[splindsay-92]

This is probably good enough for a demo, but its not entirely correct. Messages can arrive out of order, so the correct way to store them is to use the message.before()/after() funcs to ensure each message coming in is in the correct order first. Its very unlikely you'll experience this edge case if just playing around with the demo though.

[kavalerov]

Added new in b37a0e2, is this better?

[splindsay-92]

Yeh that'll do! We do have an isSameAs() function too though, perhaps use that instead of directly comparing serials? :)

[kavalerov]

100%, give me a moment

[kavalerov]

Done in c852583

[splindsay-92]

What is the message.id field? Are you sure this is exposed by the message object? If its a chat message, we should use serial instead perhaps?

[kavalerov]

Ah yes, my bad, leftover from some other stuff. Will fix shortly.

[kavalerov]

Fixed in 016631d

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
next-js-chat-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 7, 2025 1:27pm

[carolcarriazo]

@splindsay-92 @kavalerov before merge, I noticed one thing:

page.js which wasn't included in the commit has this import call:

import Head from 'next/head';
import dynamic from 'next/dynamic';

const Chat = dynamic(() => import('../components/Chat'), {
  ssr: false,
});

when I was testing this didn't work, presumably something to do with server side. shouldn't we edit it to a direct import:

import Head from 'next/head';
import Chat from '../components/Chat.jsx';

[splindsay-92]

@splindsay-92 @kavalerov before merge, I noticed one thing:

page.js which wasn't included in the commit has this import call:

import Head from 'next/head';
import dynamic from 'next/dynamic';

const Chat = dynamic(() => import('../components/Chat'), {
  ssr: false,
});

when I was testing this didn't work, presumably something to do with server side. shouldn't we edit it to a direct import:

import Head from 'next/head';
import Chat from '../components/Chat.jsx';

What was the error you are getting? 👀 I've pulled and tested locally, but I can't seem to reproduce any errors

[VeskeR]

What was the error you are getting? 👀 I've pulled and tested locally, but I can't seem to reproduce any errors

From Slack discussion:

the error in the PR was around a newer version of node.js, which we've decided to refactor later. Ivan's repo has the correct version specified

it's ready to be merged.