Updated Stream and deprecated components

* We may want to revisit the `MessageInput` component and create our own custom one: https://getstream.io/chat/docs/sdk/react/guides/theming/input_ui/

components/Chat/Chat.js

@@ -5,7 +5,7 @@ import {
   Channel,
   ChannelHeader,
   Chat as StreamChat,
-  MessageInputSmall,
+  MessageInput,
   MessageList,
   Thread,
   Window,
@@ -36,14 +36,12 @@ export default function Chat(props = {}) {
   const { channelType, channelId } = props.streamChatChannel;
   const isLivestream = channelType === 'livestream';
 
-  const {
-    getCurrentUserRoleForChatChannel,
-    streamChatRole,
-  } = useCurrentUserRoleForChatChannel({
-    variables: {
-      channelId,
-    },
-  });
+  const { getCurrentUserRoleForChatChannel, streamChatRole } =
+    useCurrentUserRoleForChatChannel({
+      variables: {
+        channelId,
+      },
+    });
 
   // Semantic shortcuts
   const connected = connectionStatus === CONNECTED;
@@ -139,7 +137,7 @@ export default function Chat(props = {}) {
               </Box>
             )}
             <MessageList />
-            {authenticated && <MessageInputSmall noFiles={noFileUploads} />}
+            {authenticated && <MessageInput noFiles={noFileUploads} />}
             {!authenticated && (
               <Styled.CenteredContent p="base">
                 <Button variant="secondary" onClick={handleLoginClick}>

package.json

@@ -41,15 +41,16 @@
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-file-utils": "^1.2.0",
     "react-is": "^18.2.0",
     "react-multi-carousel": "2.8.4",
     "react-player": "^2.9.0",
     "react-quill": "^2.0.0",
     "react-simple-typewriter": "^5.0.1",
     "sanitize-html": "^2.7.0",
     "storybook": "^7.0.18",
-    "stream-chat": "3.1.x",
-    "stream-chat-react": "^4.1.3",
+    "stream-chat": "^8.13.0",
+    "stream-chat-react": "^10.14.0",
     "styled-components": "^6.0.0-rc.3",
     "styled-system": "^5.1.5",
     "url": "^0.11.0",