chore: upgrade stream-chat-react to v13.1.0 (#111)

Author: MartinCupela

gaming-livestream/package.json

@@ -10,15 +10,15 @@
     "emoji-mart": "^5.5.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "stream-chat": "^8.56.0",
-    "stream-chat-react": "^12.12.0"
+    "stream-chat": "^9.6.0",
+    "stream-chat-react": "^13.1.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "react-scripts": "^5.0.1",
     "sass": "^1.77.7",
-    "typescript": "^4.8.4"
+    "typescript": "^5.8.3"
   },
   "scripts": {
     "start": "react-scripts start",

gaming-livestream/src/components/Chat/ChannelContainer.tsx

@@ -4,11 +4,10 @@ import {MessageTimestampController} from "../../context/MessageTimestampControll
 import {GamingChatInner} from "./GamingChatInner";
 import {Channel, useChatContext} from "stream-chat-react";
 import React, {useEffect} from "react";
-import {StreamChatType} from "../../types";
 
 
 export const ChannelContainer = () => {
-  const {channel, client, setActiveChannel} = useChatContext<StreamChatType>();
+  const {channel, client, setActiveChannel} = useChatContext();
   useEffect(() => {
     const loadChat = async () => {
       const channel = client.channel('gaming', 'gaming-demo', { name: 'Gaming Demo' });

gaming-livestream/src/components/Chat/GamingChatInner.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback} from 'react';
-import {logChatPromiseExecution} from 'stream-chat';
-import {MessageInput, MessageList, MessageToSend, useChannelActionContext, Window} from 'stream-chat-react';
+import {type LocalMessage, logChatPromiseExecution, type Message, type SendMessageOptions} from 'stream-chat';
+import {MessageInput, MessageList, useChannelActionContext, Window} from 'stream-chat-react';
 
 import {GamingChatHeader} from './GamingChatHeader';
 import {GamingMessage} from './GamingMessage';
@@ -10,8 +10,6 @@ import {GamingThread} from './GamingThread';
 import {useLayoutController} from '../../context/LayoutController';
 import {useMessageTimestamp} from "../../context/MessageTimestampController";
 
-import type {StreamChatType} from '../../types';
-
 const NOTIFICATION_TEXT_FOR_COMMAND: Record<string, string> = {
   '/ban': 'User banned',
   '/flag': 'User flagged',
@@ -33,10 +31,15 @@ export const GamingChatInner = () => {
   const { publishAppNotification } = useLayoutController();
   const {timestampEnabled, toggleTimestamp} = useMessageTimestamp();
 
-  const overrideSubmitHandler = useCallback((message: MessageToSend<StreamChatType>) => {
+  const overrideSubmitHandler = useCallback(({localMessage, message, sendOptions}: {
+    cid: string;
+    localMessage: LocalMessage;
+    message: Message;
+    sendOptions: SendMessageOptions;
+  }) => {
     const { text } = message;
     publishAppNotification(getNotificationText(text))
-    const sendMessagePromise = sendMessage(message);
+    const sendMessagePromise = sendMessage({localMessage, message, options: sendOptions});
     logChatPromiseExecution(sendMessagePromise, 'send message');
   }, [publishAppNotification, sendMessage]);
 
@@ -50,7 +53,8 @@ export const GamingChatInner = () => {
         <MessageList Message={GamingMessage} />
         <MessageInput
           focus
-          grow
+          minRows={1}
+          maxRows={8}
           Input={GamingMessageInput}
           overrideSubmitHandler={overrideSubmitHandler}
         />

gaming-livestream/src/components/Chat/GamingMessage.tsx

@@ -10,11 +10,9 @@ import ReactionUpVote from '../../assets/icons/ReactionUpVote';
 import {getColor} from '../../assets/data';
 
 import {TimestampContextValue, useMessageTimestamp} from "../../context/MessageTimestampController";
+import type {LocalMessage} from "stream-chat";
 
-import type {StreamMessage} from 'stream-chat-react/dist/context/ChannelStateContext';
-import type {StreamChatType} from '../../types';
-
-const getTimeStamp = (messageCreatedAt?: StreamMessage<StreamChatType>['created_at']) => {
+const getTimeStamp = (messageCreatedAt?: LocalMessage['created_at']) => {
 	if (!messageCreatedAt) return '';
 
 	const createdAt = new Date(messageCreatedAt);
@@ -91,10 +89,10 @@ const MessageActions = ({downVote, upVote, onOpenThread}: MessageActionsProps) =
 
 type ReactionListProps = VotingStatsProps
 	& Pick<MessageActionsProps, 'onOpenThread'>
-	& Pick<StreamMessage<StreamChatType>, 'reply_count'>;
+	& Pick<LocalMessage, 'reply_count'>;
 
 const ReactionList = ({upVotes, downVotes, onOpenThread}: ReactionListProps) => {
-	const {message} = useMessageContext<StreamChatType>();
+	const {message} = useMessageContext();
 	return (
 		<div className='custom-message__reaction-list'>
 			<VotingStats upVotes={upVotes} downVotes={downVotes}/>
@@ -108,7 +106,7 @@ const ReactionList = ({upVotes, downVotes, onOpenThread}: ReactionListProps) =>
 }
 
 type MessageContentProps = {color?: string}
-	& Pick<MessageContextValue<StreamChatType>, 'message' | 'handleAction'>
+	& Pick<MessageContextValue, 'message' | 'handleAction'>
 	& Pick<TimestampContextValue, 'timestampEnabled'>;
 
 const MessageContent = ({color, message, handleAction, timestampEnabled}: MessageContentProps) => {
@@ -132,8 +130,8 @@ const MessageContent = ({color, message, handleAction, timestampEnabled}: Messag
 }
 
 export const GamingMessage = () => {
-	const {openThread} = useChannelActionContext<StreamChatType>();
-	const {handleAction, message} = useMessageContext<StreamChatType>();
+	const {openThread} = useChannelActionContext();
+	const {handleAction, message} = useMessageContext();
 	const {timestampEnabled} = useMessageTimestamp();
 	const [downVotes, setDownVotes] = useState(0);
 	const [upVotes, setUpVotes] = useState(0);

gaming-livestream/src/components/Chat/GamingMessageInput.tsx

@@ -1,19 +1,18 @@
 import React from 'react';
 import {
-  ChatAutoComplete,
+  TextareaComposer,
   useChannelStateContext,
+  useMessageComposerHasSendableData,
   useMessageInputContext,
   useTypingContext,
 } from 'stream-chat-react';
-import { EmojiPicker } from 'stream-chat-react/emojis';
+import {EmojiPicker} from 'stream-chat-react/emojis';
 
 import SendIcon from '../../assets/icons/SendIcon';
 import StarIcon from '../../assets/icons/StarIcon';
 import EmojiIcon from '../../assets/icons/EmojiIcon';
 
-import { useLayoutController } from '../../context/LayoutController';
-
-import type { StreamChatType } from '../../types';
+import {useLayoutController} from '../../context/LayoutController';
 
 const TypingIndicator = () => (
   <div className='typing-indicator'>
@@ -26,16 +25,29 @@ const TypingIndicator = () => (
   </div>
 );
 
+const SendMessageButton = () => {
+  const {handleSubmit} = useMessageInputContext();
+  const hasSendableData = useMessageComposerHasSendableData();
+  return (
+    <button
+      className='send-message-button'
+      disabled={!hasSendableData}
+      onClick={handleSubmit}
+    >
+      <SendIcon/>
+    </button>
+  );
+};
+
 export const GamingMessageInput = React.memo(() => {
   const { showUpgradePanel } = useLayoutController();
-  const { thread } = useChannelStateContext<StreamChatType>();
-  const { typing } = useTypingContext<StreamChatType>();
-  const messageInput = useMessageInputContext<StreamChatType>();
+  const { thread } = useChannelStateContext();
+  const { typing } = useTypingContext();
 
   return (
     <div className='channel-footer'>
       <div className='channel-footer__top'>
-        <ChatAutoComplete rows={1} placeholder='Say something' />
+        <TextareaComposer rows={1} placeholder='Say something' />
         {!thread && (
           <EmojiPicker
             popperOptions={{ placement: 'top-end', strategy: 'fixed' }}
@@ -51,13 +63,7 @@ export const GamingMessageInput = React.memo(() => {
           <p>68</p>
         </button>
         {typing && !!Object.keys(typing).length && <TypingIndicator />}
-        <button
-          className='send-message-button'
-          disabled={!messageInput.text}
-          onClick={messageInput.handleSubmit}
-        >
-          <SendIcon />
-        </button>
+        <SendMessageButton/>
       </div>
     </div>
   );

gaming-livestream/src/components/Chat/GamingThreadHeader.tsx

@@ -1,9 +1,8 @@
 import type { MouseEventHandler } from 'react';
 
 import type { ThreadHeaderProps } from 'stream-chat-react';
-import type { StreamChatType } from '../../types';
 
-type GamingThreadHeaderProps = Pick<ThreadHeaderProps<StreamChatType>, 'closeThread' | 'thread'>
+type GamingThreadHeaderProps = Pick<ThreadHeaderProps, 'closeThread' | 'thread'>
 
 export const GamingThreadHeader = ({ closeThread, thread }: GamingThreadHeaderProps) => {
   const onCloseThread: MouseEventHandler<HTMLButtonElement> = (event) => {

gaming-livestream/src/components/Chat/index.tsx

@@ -13,7 +13,6 @@ import {useChecklist} from '../../hooks/useChecklistTasks';
 
 import {useConnectUser} from '../../hooks/useConnectUser';
 import {useLayoutController} from '../../context/LayoutController';
-import type {StreamChatType} from '../../types';
 import {ChannelContainer} from "./ChannelContainer";
 
 init({ data });
@@ -32,7 +31,7 @@ const userToConnect = {
 
 export const GamingChat = () => {
   const { memberListVisible, popUpText, upgradePanelVisible, chatVisible } = useLayoutController();
-  const chatClient = useConnectUser<StreamChatType>(apiKey!, userToConnect, userToken);
+  const chatClient = useConnectUser(apiKey!, userToConnect, userToken);
   useChecklist({ chatClient, targetOrigin });
 
   if (!chatClient) return null;

gaming-livestream/src/hooks/useChecklistTasks.ts

@@ -2,9 +2,6 @@ import { useEffect } from 'react';
 
 import type { Event, StreamChat } from 'stream-chat';
 
-import type { StreamChatType } from '../types';
-
-
 const notifyParent = (parent: string) => (message: any) => {
   window.parent.postMessage(message, parent);
 };
@@ -22,7 +19,7 @@ const [REACT_TO_MESSAGE, RUN_GIPHY, SEND_YOUTUBE, DRAG_DROP, START_THREAD, SEND_
 ];
 
 type ChecklistTaskProps = {
-  chatClient: StreamChat<StreamChatType> | null;
+  chatClient: StreamChat | null;
   targetOrigin?: string;
 };
 
@@ -34,7 +31,7 @@ export const useChecklist = (props: ChecklistTaskProps): void => {
     const notify = notifyParent(targetOrigin);
 
     const handleNewEvent = (
-      props: Event<StreamChatType>,
+      props: Event,
     ) => {
       const { message, type } = props;
 

gaming-livestream/src/hooks/useConnectUser.ts

@@ -1,7 +1,5 @@
 import { useEffect, useState } from 'react';
 import {
-  DefaultGenerics,
-  ExtendableGenerics,
   OwnUserResponse,
   StreamChat,
   TokenOrProvider,
@@ -16,14 +14,14 @@ import {
  * @param userToConnect the user information.
  * @param userTokenOrProvider the user's token.
  */
-export const useConnectUser = <SCG extends ExtendableGenerics = DefaultGenerics>(
+export const useConnectUser = (
   apiKey: string,
-  userToConnect: OwnUserResponse<SCG> | UserResponse<SCG>,
+  userToConnect: OwnUserResponse | UserResponse,
   userTokenOrProvider: TokenOrProvider,
 ) => {
-  const [chatClient, setChatClient] = useState<StreamChat<SCG> | null>(null);
+  const [chatClient, setChatClient] = useState<StreamChat | null>(null);
   useEffect(() => {
-    const client = new StreamChat<SCG>(apiKey, {
+    const client = new StreamChat(apiKey, {
       enableInsights: true,
       enableWSFallback: true,
     });

gaming-livestream/src/types.stream.d.ts

@@ -0,0 +1,12 @@
+import 'stream-chat';
+
+declare module 'stream-chat' {
+  interface CustomChannelData {
+    name: string;
+  }
+
+  interface CustomUserData {
+    color: string;
+    userRole: UserRole;
+  }
+}