feat: migrate to stream-chat-react v12.0.0-rc.5 (#101)

GetStream · Jul 15, 2024 · c3d253a · c3d253a
1 parent b2a0736
commit c3d253a
Show file tree

Hide file tree

Showing 53 changed files with 4,286 additions and 3,689 deletions.
diff --git a/gaming-livestream/package.json b/gaming-livestream/package.json
@@ -10,14 +10,14 @@
     "emoji-mart": "^5.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "^5.0.1",
-    "sass": "^1.56.1",
-    "stream-chat": "^8.30.0",
-    "stream-chat-react": "^11.19.0"
+    "stream-chat": "^8.37.0",
+    "stream-chat-react": "12.0.0-rc.5"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
+    "react-scripts": "^5.0.1",
+    "sass": "^1.77.7",
     "typescript": "^4.8.4"
   },
   "scripts": {

diff --git a/gaming-livestream/src/styles/GamingMessageInput/GamingMessageInput.layout.scss b/gaming-livestream/src/styles/GamingMessageInput/GamingMessageInput.layout.scss
@@ -1,4 +1,4 @@
-.rta__autocomplete.str-chat__suggestion-list-container {
+.str-chat__textarea .str-chat__suggestion-list-container {
   position: absolute;
   bottom: 100%;
   left: 0;

diff --git a/gaming-livestream/src/styles/GamingMessageInput/GamingMessageInput.theme.scss b/gaming-livestream/src/styles/GamingMessageInput/GamingMessageInput.theme.scss
@@ -7,7 +7,7 @@
   --str-chat__mention-list-emoji-item-color: var(--foreground);
 }
 
-.rta__autocomplete.str-chat__suggestion-list-container {
+.str-chat__textarea .str-chat__suggestion-list-container {
   border: 3px solid var(--border-color);
   border-radius: 16px;
   color: var(--foreground);

diff --git a/gaming-livestream/yarn.lock b/gaming-livestream/yarn.lock
diff --git a/social-messenger-ts/package.json b/social-messenger-ts/package.json
@@ -3,17 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@breezystack/lamejs": "^1.2.7",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
     "@sentry/react": "^7.56.0",
-    "@stream-io/stream-chat-css": "^4.15.0",
+    "clsx": "^2.1.1",
     "emoji-mart": "^5.5.2",
     "lodash.debounce": "^4.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-file-utils": "^1.2.0",
-    "stream-chat": "^8.30.0",
-    "stream-chat-react": "^11.19.0"
+    "stream-chat": "^8.37.0",
+    "stream-chat-react": "12.0.0-rc.5"
   },
   "devDependencies": {
     "@types/jest": "^27.5.2",

diff --git a/social-messenger-ts/src/assets/ProfilePic_LogoMark_GrdntOnWt.png b/social-messenger-ts/src/assets/ProfilePic_LogoMark_GrdntOnWt.png
diff --git a/social-messenger-ts/src/assets/stream.png b/social-messenger-ts/src/assets/stream.png
diff --git a/social-messenger-ts/src/components/AvatarGroup/AvatarGroup.css b/social-messenger-ts/src/components/AvatarGroup/AvatarGroup.css
@@ -8,6 +8,7 @@
   border-radius: 20px;
 }
 
+.avatar-group .str-chat__avatar .str-chat__avatar-fallback,
 .avatar-group .str-chat__avatar .str-chat__avatar-image {
   border-radius: 0;
 }
diff --git a/social-messenger-ts/src/components/AvatarGroup/AvatarGroup.tsx b/social-messenger-ts/src/components/AvatarGroup/AvatarGroup.tsx
@@ -1,55 +1,58 @@
-import React from 'react';
+import clsx from "clsx";
+import React, {ComponentProps} from 'react';
 import type { ChannelMemberResponse } from 'stream-chat';
 import { Avatar } from 'stream-chat-react';
 import { getCleanImage } from '../../assets';
 import './AvatarGroup.css';
-import StreamLogo from '../../assets/stream.png';
+import StreamLogo from '../../assets/ProfilePic_LogoMark_GrdntOnWt.png';
+
+const AvatarSubgroup = (props: ComponentProps<'div'>) => <div {...props} className={clsx('avatar-subgroup', {['avatar-subgroup--split']: React.Children.toArray(props.children).length > 1})}/>
 
 export const AvatarGroup = ({ members }: { members: ChannelMemberResponse[] }) => {
-  let content = <Avatar image={StreamLogo} shape='square' size={40} />;
+  let content = <Avatar image={StreamLogo} />;
 
   if (members.length === 1) {
-    content = <Avatar image={getCleanImage(members[0])} size={40} />;
+    content = <Avatar image={getCleanImage(members[0])} />;
   }
 
   if (members.length === 2) {
     content = (
       <>
-        <div>
-          <Avatar image={getCleanImage(members[0])} shape='square' size={40} />
-        </div>
-        <div>
-          <Avatar image={getCleanImage(members[1])} shape='square' size={40} />
-        </div>
+        <AvatarSubgroup>
+          <Avatar image={getCleanImage(members[0])} />
+        </AvatarSubgroup>
+        <AvatarSubgroup>
+          <Avatar image={getCleanImage(members[1])} />
+        </AvatarSubgroup>
       </>
     );
   }
 
   if (members.length === 3) {
     content = (
       <>
-        <div>
-          <Avatar image={getCleanImage(members[0])} shape='square' size={40} />
-        </div>
-        <div>
-          <Avatar image={getCleanImage(members[1])} shape='square' size={20} />
-          <Avatar image={getCleanImage(members[2])} shape='square' size={20} />
-        </div>
+        <AvatarSubgroup>
+          <Avatar image={getCleanImage(members[0])} />
+        </AvatarSubgroup>
+        <AvatarSubgroup>
+          <Avatar image={getCleanImage(members[1])} />
+          <Avatar image={getCleanImage(members[2])} />
+        </AvatarSubgroup>
       </>
     );
   }
 
   if (members.length >= 4) {
     content = (
       <>
-        <div>
-          <Avatar image={getCleanImage(members[members.length - 4])} shape='square' size={20} />
-          <Avatar image={getCleanImage(members[members.length - 3])} shape='square' size={20} />
-        </div>
-        <div>
-          <Avatar image={getCleanImage(members[members.length - 2])} shape='square' size={20} />
-          <Avatar image={getCleanImage(members[members.length - 1])} shape='square' size={20} />
-        </div>
+        <AvatarSubgroup>
+          <Avatar image={getCleanImage(members[members.length - 4])} />
+          <Avatar image={getCleanImage(members[members.length - 3])} />
+        </AvatarSubgroup>
+        <AvatarSubgroup>
+          <Avatar image={getCleanImage(members[members.length - 2])} />
+          <Avatar image={getCleanImage(members[members.length - 1])} />
+        </AvatarSubgroup>
       </>
     );
   }

diff --git a/social-messenger-ts/src/components/ChannelInner/ChannelInner.tsx b/social-messenger-ts/src/components/ChannelInner/ChannelInner.tsx
@@ -8,10 +8,12 @@ import {
   useChannelActionContext,
   Thread,
 } from 'stream-chat-react';
+import { encodeToMp3 } from 'stream-chat-react/mp3-encoder';
 
 import { MessagingChannelHeader } from '../../components';
 import { useGiphyContext } from '../../context';
 import type { StreamChatGenerics } from '../../types';
+import {MessageInputProps} from "stream-chat-react/dist/components/MessageInput/MessageInput";
 
 export type ChannelInnerProps = {
   toggleMobile: () => void;
@@ -24,7 +26,7 @@ const ChannelInner = (props: ChannelInnerProps) => {
 
   const { sendMessage } = useChannelActionContext<StreamChatGenerics>();
 
-  const overrideSubmitHandler = (message: MessageToSend<StreamChatGenerics>) => {
+  const overrideSubmitHandler: MessageInputProps<StreamChatGenerics>['overrideSubmitHandler'] = (message, _, ...restSendParams) => {
     let updatedMessage;
 
     if (message.attachments?.length && message.text?.startsWith('/giphy')) {
@@ -53,7 +55,7 @@ const ChannelInner = (props: ChannelInnerProps) => {
           : undefined,
       };
 
-      const sendMessagePromise = sendMessage(messageToSend);
+      const sendMessagePromise = sendMessage(messageToSend, ...restSendParams);
       logChatPromiseExecution(sendMessagePromise, 'send message');
     }
 
@@ -67,7 +69,10 @@ const ChannelInner = (props: ChannelInnerProps) => {
       <Window>
         <MessagingChannelHeader theme={theme} toggleMobile={toggleMobile} />
         <MessageList messageActions={actions} />
-        <MessageInput focus overrideSubmitHandler={overrideSubmitHandler} audioRecordingEnabled asyncMessagesMultiSendEnabled />
+        <MessageInput
+            focus
+            overrideSubmitHandler={overrideSubmitHandler}
+            audioRecordingConfig={{ transcoderConfig: { encoder: encodeToMp3 } }} audioRecordingEnabled asyncMessagesMultiSendEnabled />
       </Window>
       <Thread />
     </>

diff --git a/social-messenger-ts/src/components/CreateChannel/CreateChannel.css b/social-messenger-ts/src/components/CreateChannel/CreateChannel.css
@@ -223,11 +223,11 @@
 }
 
 /* modifiers page structure */
-.str-chat-channel.messaging .messaging-create-channel + .str-chat__main-panel {
+.str-chat__channel.messaging .messaging-create-channel + .str-chat__main-panel {
   display: none;
 }
 
-.str-chat-channel.messaging .messaging-create-channel ~ .str-chat__thread {
+.str-chat__channel.messaging .messaging-create-channel ~ .str-chat__thread {
   display: none;
 }
 

diff --git a/social-messenger-ts/src/components/CreateChannel/CreateChannel.tsx b/social-messenger-ts/src/components/CreateChannel/CreateChannel.tsx
@@ -11,7 +11,7 @@ import type { StreamChatGenerics } from '../../types';
 
 const UserResult = ({ user }: { user: UserResponse<StreamChatGenerics> }) => (
   <li className='messaging-create-channel__user-result'>
-    <Avatar image={user.image} name={user.name} size={40} />
+    <Avatar image={user.image} name={user.name} />
     {user.online && <div className='messaging-create-channel__user-result-online' />}
     <div className='messaging-create-channel__user-result__details'>
       <span>{user.name}</span>

diff --git a/social-messenger-ts/src/components/MessagingChannelHeader/MessagingChannelHeader.css b/social-messenger-ts/src/components/MessagingChannelHeader/MessagingChannelHeader.css
@@ -10,7 +10,7 @@
   z-index: 1;
 }
 
-.str-chat-channel .str-chat__main-panel:not(:last-child) .messaging__channel-header {
+.str-chat__channel .str-chat__main-panel:not(:last-child) .messaging__channel-header {
   border-radius: 10px 0 0 0;
 }
 

diff --git a/social-messenger-ts/src/components/MessagingChannelListHeader/MessagingChannelListHeader.tsx b/social-messenger-ts/src/components/MessagingChannelListHeader/MessagingChannelListHeader.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Avatar, useChatContext } from 'stream-chat-react';
 
 import { CreateChannelIcon } from '../../assets';
-import streamLogo from '../../assets/stream.png';
+import streamLogo from '../../assets/ProfilePic_LogoMark_GrdntOnWt.png';
 
 import type { StreamChatGenerics } from '../../types';
 
@@ -19,7 +19,7 @@ const MessagingChannelListHeader = React.memo((props: Props) => {
 
   return (
       <div className='messaging__channel-list__header'>
-        <Avatar image={image} name={name} size={40} />
+        <Avatar image={image} name={name} />
         <div className={`messaging__channel-list__header__name`}>{name || id}</div>
         <button
           className={`messaging__channel-list__header__button`}

diff --git a/social-messenger-ts/src/components/MessagingThreadHeader/MessagingThreadHeader.css b/social-messenger-ts/src/components/MessagingThreadHeader/MessagingThreadHeader.css
@@ -69,7 +69,7 @@
   padding: 0;
 }
 
-.str-chat__thread-list .str-chat__list.str-chat__list--thread {
+.str-chat__thread-list .str-chat__list.str-chat__thread-list {
   padding: 0 !important;
 }
 
@@ -95,7 +95,7 @@
   display: none;
 }
 
-.messaging.str-chat .str-chat__thread-list .str-chat__reverse-infinite-scroll {
+.messaging.str-chat .str-chat__thread-list .str-chat__message-list-scroll {
   padding-top: 20px;
 }
 

diff --git a/social-messenger-ts/src/styles/App.layout.css b/social-messenger-ts/src/styles/App.layout.css
@@ -21,14 +21,21 @@ body {
 
 .str-chat__channel {
     flex: 1;
+    min-width: 0;
 }
 
 .str-chat__main-panel {
     flex: 1;
+    min-width: 0;
+}
+
+.str-chat__main-panel--thread-open {
+    display: none;
 }
 
 .str-chat__thread {
     flex: 0 1 var(--min-workspace-width);
+    max-width: 45%;
 }
 
 /* Mobile View */
@@ -38,7 +45,7 @@ body {
      * on some mobile browsers. The app-height variable is set dynamically
      * using javascript.
      */
-    .str-chat-channel {
+    .str-chat__channel {
         height: var(--app-height);
     }
 
@@ -62,7 +69,7 @@ body {
 
 /* To fix inherited styles (as per Team and Customer Support apps */
 @media screen and (max-width: 960px) {
-    .str-chat-channel-list {
+    .str-chat__channel-list {
         position: unset;
         left: unset;
         top: unset;
@@ -73,8 +80,11 @@ body {
     }
 
     .str-chat__thread {
+        flex: 1;
         position: absolute;
-        height: 100%;
-        width: 100%;
+        z-index: 1;
+        left: 0;
+        right: 0;
+        max-width: 100%;
     }
 }
diff --git a/social-messenger-ts/src/styles/App.theme.css b/social-messenger-ts/src/styles/App.theme.css
@@ -7,6 +7,16 @@
     --str-chat__message-list-background-color: var(--str-chat__background-color);
 
     --messaging__header-shadow: 0 7px 9px rgba(0, 0, 0, 0.03), 0 1px 0 rgba(0, 0, 0, 0.03);
+
+    .avatar-subgroup.avatar-subgroup--split {
+        --str-chat__avatar-size: 20px;
+    }
+
+    .str-chat__message {
+        --str-chat__avatar-size: 32px;
+    }
+
+    --str-chat__avatar-size: 40px;
 }
 
 .str-chat.str-chat__theme-dark {

diff --git a/social-messenger-ts/src/styles/overrides/ChannelList/ChannelList.theme.css b/social-messenger-ts/src/styles/overrides/ChannelList/ChannelList.theme.css
@@ -8,7 +8,7 @@
 
 /* To fix inherited styles (as per Team and Customer Support apps */
 @media screen and (max-width: 960px) {
-    .str-chat-channel-list {
+    .str-chat__channel-list {
         box-shadow: unset;
     }
 }
diff --git a/social-messenger-ts/src/styles/overrides/Message/Message.theme.css b/social-messenger-ts/src/styles/overrides/Message/Message.theme.css
@@ -28,4 +28,8 @@
 
 .str-chat.str-chat__theme-dark .str-chat__message--system__line {
     background: rgba(255, 255, 255, 0.1);
+}
+
+.str-chat__message-attachment-download-icon path {
+    fill: white;
 }