release-0.3.3

Author: afonsocrg

package-lock.json

@@ -20,7 +20,7 @@
     "clean": "rm -rf node_modules dist"
   },
   "dependencies": {
-    "react-together": "^0.3.2"
+    "react-together": "^0.3.3"
   },
   "peerDependencies": {
     "antd": "^5.19.0"

packages/react-together-ant-design/package.json

@@ -21,7 +21,7 @@
     "clean": "rm -rf node_modules dist"
   },
   "dependencies": {
-    "react-together": "^0.3.2"
+    "react-together": "^0.3.3"
   },
   "peerDependencies": {
     "primereact": "^10.6.6"

packages/react-together-primereact/package.json

@@ -1,3 +1,17 @@
+## 0.3.3
+`2025-01-29`
+
+ - Added `Cursors` component
+ - Added `useCursors` hook
+ - Added `useNicknames` hook
+ - Added `useAllNicknames` hook
+ - Added `throttleDelay` option to `useStateTogether`
+ - Added `throttleDelay` option to `useStateTogetherWithPerUserValues`
+ - Added `rememberUsers` prop to `ReactTogether` component
+ - Added `deriveNickname` prop to `ReactTogether` component
+ - Added `nickname` property to `ConnectedUser` interface
+ - Deprecated `name` property in `ConnectedUser` interface
+
 ## 0.3.2
 `2025-01-10`
 

packages/react-together/CHANGELOG.md

@@ -1,7 +1,7 @@
 {
   "name": "react-together",
   "description": "A library to seamlessly add real-time multi-user interaction to your React app!",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "license": "Apache-2.0",
   "type": "module",
   "main": "dist/index.js",

packages/react-together/package.json

@@ -1,3 +1,4 @@
+import { useAllNicknames } from '../../hooks'
 import { MessageBodyProps } from './types'
 
 function timeToLocale(timestamp: number) {
@@ -12,10 +13,12 @@ export default function MessageBody({
   sentAt,
   formatTime = timeToLocale
 }: MessageBodyProps) {
+  const allNicknames = useAllNicknames()
+  const senderNickname = allNicknames[senderId] ?? senderId
   return (
     <div className={`rt-message-divider ${isMe ? 'isMe' : ''}`}>
       <div className={`rt-message-border ${isMe ? 'isMe' : ''}`}>
-        <span className="rt-messageLabel">{senderId}</span>
+        <span className="rt-messageLabel">{senderNickname}</span>
         <div>
           <span className="rt-message-text">{message}</span>{' '}
           <span className="rt-messageLabel">

packages/react-together/src/components/Chat/MessageBody.tsx

@@ -24,15 +24,14 @@ export default function MessageList({
     <div className="rt-messageContainer">
       {isTogether ? (
         messages.length > 0 ? (
-          messages.map(({ id, senderId, sentAt, message }, index) => (
+          messages.map(({ id, senderId, ...message }, index) => (
             <div
               key={id}
               ref={index === messages.length - 1 ? lastMessageRef : undefined}
             >
               <MessageRow
                 senderId={senderId}
-                message={message}
-                sentAt={sentAt}
+                {...message}
                 isMe={senderId === myId}
                 MessageAvatar={MessageAvatar}
                 MessageBody={MessageBody}

packages/react-together/src/components/Chat/MessageList.tsx

@@ -1,12 +1,12 @@
 import { MessageRowProps } from './types'
 
 export default function MessageRow({
-  message,
   senderId,
   sentAt,
   isMe,
   MessageAvatar,
-  MessageBody
+  MessageBody,
+  ...message
 }: MessageRowProps) {
   return (
     <div className={`rt-message-row ${isMe ? 'isMe' : ''}`}>
@@ -15,7 +15,7 @@ export default function MessageRow({
         isMe={isMe}
         senderId={senderId}
         sentAt={sentAt}
-        message={message}
+        {...message}
       />
     </div>
   )

packages/react-together/src/components/Chat/MessageRow.tsx

@@ -72,10 +72,7 @@ export interface MessageAvatarProps {
   isMe: boolean
 }
 
-export interface MessageBodyProps {
-  senderId: string
-  message: string
-  sentAt: number
+export interface MessageBodyProps extends Omit<ChatMessage, 'id'> {
   isMe: boolean
   formatTime?: (ts: number) => string
 }

packages/react-together/src/components/Chat/types.ts

@@ -3,16 +3,16 @@ import { AvatarGroup } from 'primereact/avatargroup'
 import { useConnectedUsers } from '../hooks'
 
 interface UserAvatarProps {
-  name: string
+  nickname: string
 }
-function UserAvatar({ name }: UserAvatarProps) {
+function UserAvatar({ nickname }: UserAvatarProps) {
   return (
     <Avatar
-      image={`https://api.dicebear.com/8.x/initials/svg?seed=${name}`}
+      image={`https://api.dicebear.com/8.x/initials/svg?seed=${nickname}`}
       size="normal"
       shape="circle"
-      label={name}
-      pt={{ root: { title: name } }}
+      label={nickname}
+      pt={{ root: { title: nickname } }}
     />
   )
 }
@@ -22,8 +22,7 @@ type ConnectedUsersProps = {
   debug?: boolean
 }
 export default function ConnectedUsers({
-  maxAvatars = 3,
-  debug = false
+  maxAvatars = 3
 }: ConnectedUsersProps) {
   const users = useConnectedUsers()
 
@@ -33,36 +32,16 @@ export default function ConnectedUsers({
   return (
     <>
       <AvatarGroup pt={{ root: { style: { gap: '10px' } } }}>
-        {users.slice(0, maxAvatars - 1).map(({ name, userId }) => (
-          <UserAvatar key={userId} name={name} />
+        {users.slice(0, maxAvatars - 1).map(({ nickname, userId }) => (
+          <UserAvatar key={userId} nickname={nickname} />
         ))}
         {nAvatars > 0 &&
           (nAvatars === 1 ? (
-            <UserAvatar name={users[users.length - 1].name} />
+            <UserAvatar nickname={users[users.length - 1].nickname} />
           ) : (
             <Avatar label={`+${nAvatars}`} shape="circle" size={size} />
           ))}
       </AvatarGroup>
-      {debug && (
-        <div style={{ textAlign: 'left' }}>
-          <p>Connected users:</p>
-          <ul>
-            {users.map(({ userId, name, isYou }) => (
-              <li key={userId}>
-                {isYou ? (
-                  <strong>
-                    {userId}: {name}
-                  </strong>
-                ) : (
-                  <span>
-                    {userId}: {name}
-                  </span>
-                )}
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
     </>
   )
 }