First pass reviewed

Author: arnautov-anton

src/components/AIStateIndicator/hooks/useAIState.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import type { AIState, Channel, Event } from 'stream-chat';
+import type { AIState, Channel } from 'stream-chat';
 
 export const AIStates = {
   Error: 'AI_STATE_ERROR',
@@ -23,7 +23,7 @@ export const useAIState = (channel?: Channel): { aiState: AIState } => {
       return;
     }
 
-    const indicatorChangedListener = channel.on('ai_indicator.update', (event: Event) => {
+    const indicatorChangedListener = channel.on('ai_indicator.update', (event) => {
       const { cid } = event;
       const state = event.ai_state as AIState;
       if (channel.cid === cid) {

src/components/Attachment/Audio.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Attachment } from 'stream-chat';
+import type { Attachment, VoiceRecordingAttachment } from 'stream-chat';
 
 import {
   FileSizeIndicator as DefaultFileSizeIndicator,
@@ -87,9 +87,8 @@ const audioPlayerStateSelector = (state: AudioPlayerState) => ({
  * Audio attachment with play/pause button and progress bar
  */
 export const Audio = (props: AudioProps) => {
-  const {
-    attachment: { asset_url, duration, file_size, mime_type, title },
-  } = props;
+  const { asset_url, custom, title } = props.attachment as VoiceRecordingAttachment;
+  const { duration, file_size, mime_type, waveform_data } = custom;
 
   /**
    * Introducing message context. This could be breaking change, therefore the fallback to {} is provided.
@@ -111,7 +110,7 @@ export const Audio = (props: AudioProps) => {
       `${threadList ? (message.parent_id ?? message.id) : ''}${message.id}`,
     src: asset_url,
     title,
-    waveformData: props.attachment.waveform_data,
+    waveformData: waveform_data,
   });
 
   return audioPlayer ? <AudioAttachmentUI audioPlayer={audioPlayer} /> : null;

src/components/Attachment/FileAttachment.tsx

@@ -16,6 +16,7 @@ export const FileAttachment = ({ attachment }: FileAttachmentProps) => {
   const { AttachmentFileIcon, FileSizeIndicator = DefaultFileSizeIndicator } =
     useComponentContext();
   const FileIconComponent = AttachmentFileIcon ?? FileIcon;
+  const { file_size, mime_type } = attachment.custom;
   return (
     <div
       className='str-chat__message-attachment-file--item'
@@ -24,7 +25,7 @@ export const FileAttachment = ({ attachment }: FileAttachmentProps) => {
       <FileIconComponent
         className='str-chat__file-icon'
         fileName={attachment.title}
-        mimeType={attachment.mime_type}
+        mimeType={mime_type}
       />
       <div className='str-chat__message-attachment-file--item__info'>
         <div className='str-chat__message-attachment-file--item__first-row'>
@@ -36,7 +37,7 @@ export const FileAttachment = ({ attachment }: FileAttachmentProps) => {
           </div>
         </div>
         <div className='str-chat__message-attachment-file--item__data'>
-          <FileSizeIndicator fileSize={attachment.file_size} />
+          <FileSizeIndicator fileSize={file_size} />
         </div>
       </div>
       <DownloadButton

src/components/Attachment/LinkPreview/CardAudio.tsx

@@ -85,17 +85,17 @@ const AudioWidget = ({ mimeType, src }: { src: string; mimeType?: string }) => {
   );
 };
 
-export const CardAudio = ({
-  attachment: {
+export const CardAudio = ({ attachment }: AudioProps) => {
+  const {
     asset_url,
     author_name,
-    mime_type,
+    custom,
     og_scrape_url,
     text,
     title,
     title_link,
-  },
-}: AudioProps) => {
+  } = attachment;
+  const { mime_type } = custom;
   const url = title_link || og_scrape_url;
   const dataTestId = 'card-audio-widget';
   const rootClassName = 'str-chat__message-attachment-card-audio-widget';

src/components/Attachment/VoiceRecording.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Attachment } from 'stream-chat';
+import type { Attachment, VoiceRecordingAttachment } from 'stream-chat';
 
 import { FileSizeIndicator as DefaultFileSizeIndicator } from './components';
 import { FileIcon } from '../FileIcon';
@@ -103,14 +103,13 @@ export const VoiceRecordingPlayer = ({
   playbackRates,
 }: VoiceRecordingPlayerProps) => {
   const { t } = useTranslationContext();
+  const { asset_url, title = t('Voice message') } = attachment;
   const {
-    asset_url,
     duration = 0,
     file_size,
     mime_type,
-    title = t('Voice message'),
     waveform_data,
-  } = attachment;
+  } = (attachment as VoiceRecordingAttachment).custom;
 
   /**
    * Introducing message context. This could be breaking change, therefore the fallback to {} is provided.
@@ -143,27 +142,28 @@ export type QuotedVoiceRecordingProps = Pick<VoiceRecordingProps, 'attachment'>;
 
 export const QuotedVoiceRecording = ({ attachment }: QuotedVoiceRecordingProps) => {
   const { FileSizeIndicator = DefaultFileSizeIndicator } = useComponentContext();
+  const { duration, file_size, mime_type } = (attachment as VoiceRecordingAttachment).custom;
   return (
     <div className={rootClassName} data-testid='quoted-voice-recording-widget'>
       <div className='str-chat__message-attachment__voice-recording-widget__metadata'>
         <div className='str-chat__message-attachment__voice-recording-widget__audio-state'>
           <div className='str-chat__message-attachment__voice-recording-widget__timer'>
-            {attachment.duration ? (
+            {duration ? (
               <DurationDisplay
-                duration={attachment.duration}
+                duration={duration}
                 isPlaying={false}
                 secondsElapsed={undefined}
               />
             ) : (
               <FileSizeIndicator
-                fileSize={attachment.file_size}
+                fileSize={file_size}
                 maximumFractionDigits={0}
               />
             )}
           </div>
         </div>
       </div>
-      <FileIcon mimeType={attachment.mime_type} />
+      <FileIcon mimeType={mime_type} />
     </div>
   );
 };

src/components/Badge/MediaBadge.tsx

@@ -1,6 +1,6 @@
 import { IconMicrophoneSolid, IconVideoFill } from '../Icons';
 import React, { type ComponentType } from 'react';
-import type { LocalAttachment } from 'stream-chat';
+import type { LocalAttachment, LocalVoiceRecordingAttachment } from 'stream-chat';
 import clsx from 'clsx';
 
 export type MediaBadgeVariant = 'video' | 'voice-recording' | string;
@@ -17,14 +17,15 @@ const MediaBadgeVariantToIcon: Record<MediaBadgeVariant, ComponentType> = {
 
 export const MediaBadge = ({ attachment, variant }: MediaBadgeProps) => {
   const Icon = MediaBadgeVariantToIcon[variant];
+  const { duration } = (attachment as LocalVoiceRecordingAttachment).custom;
   return (
     <div
       className={clsx('str-chat__media-badge', {
         [`str-chat__media-badge--${variant}`]: variant,
       })}
     >
       {Icon && <Icon />}
-      {attachment.duration ? <div>{attachment.duration}</div> : null}
+      {duration ? <div>{duration}</div> : null}
     </div>
   );
 };

src/components/Channel/Channel.tsx

@@ -350,10 +350,11 @@ const ChannelInner = (
   );
 
   const handleEvent = async (event: Event) => {
-    if (event.message) {
+    const message = (event as Extract<Event, { message?: unknown }>).message;
+    if (message) {
       dispatch({
         channel,
-        message: event.message,
+        message,
         type: 'updateThreadOnEvent',
       });
     }
@@ -761,7 +762,7 @@ const ChannelInner = (
                 await channel.query(
                   {
                     messages: {
-                      created_at_around: channelUnreadUiState.last_read.toISOString(),
+                      created_at_around: channelUnreadUiState.last_read,
                       limit: queryMessageLimit,
                     },
                   },
@@ -786,9 +787,8 @@ const ChannelInner = (
               );
               return;
             }
-            const firstMessageTimestamp = new Date(
-              firstMessageWithCreationDate.created_at as string,
-            ).getTime();
+            const firstMessageTimestamp =
+              firstMessageWithCreationDate.created_at.getTime();
             if (lastReadTimestamp < firstMessageTimestamp) {
               // whole channel is unread
               firstUnreadMessageId = firstMessageWithCreationDate.id;
@@ -876,7 +876,10 @@ const ChannelInner = (
       if (doDeleteMessageRequest) {
         deletedMessage = await doDeleteMessageRequest(message, options);
       } else {
-        const result = await client.deleteMessage(message.id, options);
+        const result = await client.deleteMessage({
+          id: message.id,
+          ...options,
+        });
         deletedMessage = result.message;
       }
 
@@ -911,7 +914,7 @@ const ChannelInner = (
       if (doSendMessageRequest) {
         messageResponse = await doSendMessageRequest(channel, message, options);
       } else {
-        messageResponse = await channel.sendMessage(message, options);
+        messageResponse = await channel.sendMessage({ message, ...options });
       }
 
       let existingMessage: LocalMessage | undefined = undefined;
@@ -1075,9 +1078,10 @@ const ChannelInner = (
     const oldestMessageId = oldMessages[0]?.id;
 
     try {
-      const queryResponse = await channel.getReplies(parentId, {
+      const queryResponse = await channel.getReplies({
         id_lt: oldestMessageId,
         limit,
+        parent_id: parentId,
       });
 
       const threadHasMoreMessages = hasMoreMessagesProbably(

src/components/Channel/hooks/useCreateChannelStateContext.ts

@@ -140,7 +140,7 @@ export const useCreateChannelStateContext = (
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
-      channel.data?.name, // otherwise ChannelHeader will not be updated
+      channel.data?.custom?.name,
       channelId,
       channelUnreadUiState,
       error,

src/components/ChannelList/ChannelList.tsx

@@ -7,6 +7,7 @@ import type {
   ChannelOptions,
   ChannelSort,
   Event,
+  EventPayload,
   SearchControllerState,
 } from 'stream-chat';
 
@@ -44,7 +45,7 @@ import { useStableId } from '../UtilityComponents/useStableId';
 
 const DEFAULT_FILTERS = {};
 const DEFAULT_OPTIONS = {};
-const DEFAULT_SORT = {};
+const DEFAULT_SORT: ChannelSort = [];
 
 const searchControllerStateSelector = (nextValue: SearchControllerState) => ({
   searchIsActive: nextValue.isActive,
@@ -228,9 +229,12 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
       );
 
       if (!customActiveChannelObject) {
-        [customActiveChannelObject] = await client.queryChannels({
-          id: customActiveChannel,
-        });
+        [customActiveChannelObject] = await client.queryChannelsAndHydrate(
+          {
+            filter_conditions: { id: customActiveChannel },
+          },
+          { withResponse: false },
+        );
       }
 
       if (customActiveChannelObject) {
@@ -308,18 +312,19 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
   useConnectionRecoveredListener(forceUpdate);
 
   useEffect(() => {
-    const handleEvent = (event: Event) => {
+    const handleEvent = (event: EventPayload<'channel.deleted' | 'channel.hidden'>) => {
       if (event.cid === channel?.cid) {
         setActiveChannel();
       }
     };
 
-    client.on('channel.deleted', handleEvent);
-    client.on('channel.hidden', handleEvent);
+    const subscriptions = [
+      client.on('channel.deleted', handleEvent),
+      client.on('channel.hidden', handleEvent),
+    ];
 
     return () => {
-      client.off('channel.deleted', handleEvent);
-      client.off('channel.hidden', handleEvent);
+      subscriptions.forEach((subscription) => subscription.unsubscribe());
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [channel?.cid]);

src/components/ChannelList/ChannelListUI.tsx

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import type { PropsWithChildren } from 'react';
-import type { APIErrorResponse, Channel, ErrorFromResponse } from 'stream-chat';
+import type { APIErrorResponse, Channel, StreamAPIError } from 'stream-chat';
 
 import { LoadingChannels } from '../Loading/LoadingChannels';
 import { NullComponent } from '../UtilityComponents';
@@ -9,7 +9,7 @@ import { useComponentContext, useTranslationContext } from '../../context';
 
 export type ChannelListUIProps = {
   /** Whether the channel query request returned an errored response */
-  error: ErrorFromResponse<APIErrorResponse> | null;
+  error: StreamAPIError<APIErrorResponse> | null;
   /** The channels currently loaded in the list, only defined if `sendChannelsToList` on `ChannelList` is true */
   loadedChannels?: Channel[];
   /** Whether the channels are currently loading */