Initial draft

Author: arnautov-anton

src/components/AIStateIndicator/AIStateIndicator.tsx

@@ -5,22 +5,16 @@ import { Channel } from 'stream-chat';
 import { AIStates, useAIState } from './hooks/useAIState';
 
 import { useChannelStateContext, useTranslationContext } from '../../context';
-import type { DefaultStreamChatGenerics } from '../../types/types';
 
-export type AIStateIndicatorProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = {
-  channel?: Channel<StreamChatGenerics>;
+export type AIStateIndicatorProps = {
+  channel?: Channel;
 };
 
-export const AIStateIndicator = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export const AIStateIndicator = ({
   channel: channelFromProps,
-}: AIStateIndicatorProps<StreamChatGenerics>) => {
+}: AIStateIndicatorProps) => {
   const { t } = useTranslationContext();
-  const { channel: channelFromContext } =
-    useChannelStateContext<StreamChatGenerics>('AIStateIndicator');
+  const { channel: channelFromContext } = useChannelStateContext('AIStateIndicator');
   const channel = channelFromProps || channelFromContext;
   const { aiState } = useAIState(channel);
   const allowedStates = {

src/components/AIStateIndicator/hooks/useAIState.ts

@@ -2,8 +2,6 @@ import { useEffect, useState } from 'react';
 
 import { AIState, Channel, Event } from 'stream-chat';
 
-import type { DefaultStreamChatGenerics } from '../../../types/types';
-
 export const AIStates = {
   Error: 'AI_STATE_ERROR',
   ExternalSources: 'AI_STATE_EXTERNAL_SOURCES',
@@ -17,28 +15,21 @@ export const AIStates = {
  * @param {Channel} channel - The channel for which we want to know the AI state.
  * @returns {{ aiState: AIState }} The current AI state for the given channel.
  */
-export const useAIState = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  channel?: Channel<StreamChatGenerics>,
-): { aiState: AIState } => {
+export const useAIState = (channel?: Channel): { aiState: AIState } => {
   const [aiState, setAiState] = useState<AIState>(AIStates.Idle);
 
   useEffect(() => {
     if (!channel) {
       return;
     }
 
-    const indicatorChangedListener = channel.on(
-      'ai_indicator.update',
-      (event: Event<StreamChatGenerics>) => {
-        const { cid } = event;
-        const state = event.ai_state as AIState;
-        if (channel.cid === cid) {
-          setAiState(state);
-        }
-      },
-    );
+    const indicatorChangedListener = channel.on('ai_indicator.update', (event: Event) => {
+      const { cid } = event;
+      const state = event.ai_state as AIState;
+      if (channel.cid === cid) {
+        setAiState(state);
+      }
+    });
 
     const indicatorClearedListener = channel.on('ai_indicator.clear', (event) => {
       const { cid } = event;

src/components/Attachment/Attachment.tsx

@@ -32,8 +32,6 @@ import type { GalleryProps, ImageProps } from '../Gallery';
 import type { UnsupportedAttachmentProps } from './UnsupportedAttachment';
 import type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';
 
-import type { DefaultStreamChatGenerics } from '../../types/types';
-
 const CONTAINER_MAP = {
   audio: AudioContainer,
   card: CardContainer,
@@ -54,23 +52,21 @@ export const ATTACHMENT_GROUPS_ORDER = [
   'unsupported',
 ] as const;
 
-export type AttachmentProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = {
+export type AttachmentProps = {
   /** The message attachments to render, see [attachment structure](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) **/
-  attachments: StreamAttachment<StreamChatGenerics>[];
+  attachments: StreamAttachment[];
   /**	The handler function to call when an action is performed on an attachment, examples include canceling a \/giphy command or shuffling the results. */
   actionHandler?: ActionHandlerReturnType;
   /** Custom UI component for displaying attachment actions, defaults to and accepts same props as: [AttachmentActions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/AttachmentActions.tsx) */
-  AttachmentActions?: React.ComponentType<AttachmentActionsProps<StreamChatGenerics>>;
+  AttachmentActions?: React.ComponentType<AttachmentActionsProps>;
   /** Custom UI component for displaying an audio type attachment, defaults to and accepts same props as: [Audio](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Audio.tsx) */
-  Audio?: React.ComponentType<AudioProps<StreamChatGenerics>>;
+  Audio?: React.ComponentType<AudioProps>;
   /** Custom UI component for displaying a card type attachment, defaults to and accepts same props as: [Card](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Card.tsx) */
   Card?: React.ComponentType<CardProps>;
   /** Custom UI component for displaying a file type attachment, defaults to and accepts same props as: [File](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/FileAttachment.tsx) */
-  File?: React.ComponentType<FileAttachmentProps<StreamChatGenerics>>;
+  File?: React.ComponentType<FileAttachmentProps>;
   /** Custom UI component for displaying a gallery of image type attachments, defaults to and accepts same props as: [Gallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/Gallery.tsx) */
-  Gallery?: React.ComponentType<GalleryProps<StreamChatGenerics>>;
+  Gallery?: React.ComponentType<GalleryProps>;
   /** Custom UI component for displaying an image type attachment, defaults to and accepts same props as: [Image](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/Image.tsx) */
   Image?: React.ComponentType<ImageProps>;
   /** Optional flag to signal that an attachment is a displayed as a part of a quoted message */
@@ -80,17 +76,13 @@ export type AttachmentProps<
   /** Custom UI component for displaying unsupported attachment types, defaults to NullComponent */
   UnsupportedAttachment?: React.ComponentType<UnsupportedAttachmentProps>;
   /** Custom UI component for displaying an audio recording attachment, defaults to and accepts same props as: [VoiceRecording](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/VoiceRecording.tsx) */
-  VoiceRecording?: React.ComponentType<VoiceRecordingProps<StreamChatGenerics>>;
+  VoiceRecording?: React.ComponentType<VoiceRecordingProps>;
 };
 
 /**
  * A component used for rendering message attachments. By default, the component supports: AttachmentActions, Audio, Card, File, Gallery, Image, and Video
  */
-export const Attachment = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: AttachmentProps<StreamChatGenerics>,
-) => {
+export const Attachment = (props: AttachmentProps) => {
   const { attachments } = props;
 
   const groupedAttachments = useMemo(
@@ -109,14 +101,12 @@ export const Attachment = <
   );
 };
 
-const renderGroupedAttachments = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+const renderGroupedAttachments = ({
   attachments,
   ...rest
-}: AttachmentProps<StreamChatGenerics>): GroupedRenderedAttachment => {
-  const uploadedImages: StreamAttachment<StreamChatGenerics>[] = attachments.filter(
-    (attachment) => isUploadedImage(attachment),
+}: AttachmentProps): GroupedRenderedAttachment => {
+  const uploadedImages: StreamAttachment[] = attachments.filter((attachment) =>
+    isUploadedImage(attachment),
   );
 
   const containers = attachments
@@ -171,10 +161,8 @@ const renderGroupedAttachments = <
   return containers;
 };
 
-const getAttachmentType = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  attachment: AttachmentProps<StreamChatGenerics>['attachments'][number],
+const getAttachmentType = (
+  attachment: AttachmentProps['attachments'][number],
 ): keyof typeof CONTAINER_MAP => {
   if (isScrapedContent(attachment)) {
     return 'card';

src/components/Attachment/AttachmentActions.tsx

@@ -4,11 +4,8 @@ import type { Action, Attachment } from 'stream-chat';
 import { useTranslationContext } from '../../context';
 
 import type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';
-import type { DefaultStreamChatGenerics } from '../../types/types';
 
-export type AttachmentActionsProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Attachment<StreamChatGenerics> & {
+export type AttachmentActionsProps = Attachment & {
   /** A list of actions */
   actions: Action[];
   /** Unique id for action button key. Key is generated by concatenating this id with action value - {`${id}-${action.value}`} */
@@ -19,11 +16,7 @@ export type AttachmentActionsProps<
   actionHandler?: ActionHandlerReturnType;
 };
 
-const UnMemoizedAttachmentActions = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: AttachmentActionsProps<StreamChatGenerics>,
-) => {
+const UnMemoizedAttachmentActions = (props: AttachmentActionsProps) => {
   const { actionHandler, actions, id, text } = props;
   const { t } = useTranslationContext('UnMemoizedAttachmentActions');
 

src/components/Attachment/AttachmentContainer.tsx

@@ -23,25 +23,21 @@ import {
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 
 import type {
-  DefaultStreamChatGenerics,
   ImageAttachmentConfiguration,
   VideoAttachmentConfiguration,
 } from '../../types/types';
 import type { Attachment } from 'stream-chat';
+import { LocalAttachment } from '../MessageInput';
 
-export type AttachmentContainerProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = {
-  attachment: Attachment<StreamChatGenerics> | GalleryAttachment<StreamChatGenerics>;
+export type AttachmentContainerProps = {
+  attachment: Attachment | GalleryAttachment;
   componentType: AttachmentComponentType;
 };
-export const AttachmentWithinContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export const AttachmentWithinContainer = ({
   attachment,
   children,
   componentType,
-}: PropsWithChildren<AttachmentContainerProps<StreamChatGenerics>>) => {
+}: PropsWithChildren<AttachmentContainerProps>) => {
   const isGAT = isGalleryAttachmentType(attachment);
   let extra = '';
 
@@ -69,21 +65,19 @@ export const AttachmentWithinContainer = <
   return <div className={classNames}>{children}</div>;
 };
 
-export const AttachmentActionsContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export const AttachmentActionsContainer = ({
   actionHandler,
   attachment,
   AttachmentActions = DefaultAttachmentActions,
-}: RenderAttachmentProps<StreamChatGenerics>) => {
+}: RenderAttachmentProps) => {
   if (!attachment.actions?.length) return null;
 
   return (
     <AttachmentActions
       {...attachment}
       actionHandler={actionHandler}
       actions={attachment.actions}
-      id={attachment.id || ''}
+      id={(attachment as LocalAttachment).localMetadata?.id || ''}
       text={attachment.text || ''}
     />
   );
@@ -108,12 +102,10 @@ function getCssDimensionsVariables(url: string) {
   return cssVars;
 }
 
-export const GalleryContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export const GalleryContainer = ({
   attachment,
   Gallery = DefaultGallery,
-}: RenderGalleryProps<StreamChatGenerics>) => {
+}: RenderGalleryProps) => {
   const imageElements = useRef<HTMLElement[]>([]);
   const { imageAttachmentSizeHandler } = useChannelStateContext();
   const [attachmentConfigurations, setAttachmentConfigurations] = useState<
@@ -150,11 +142,7 @@ export const GalleryContainer = <
   );
 };
 
-export const ImageContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: RenderAttachmentProps<StreamChatGenerics>,
-) => {
+export const ImageContainer = (props: RenderAttachmentProps) => {
   const { attachment, Image = DefaultImage } = props;
   const componentType = 'image';
   const imageElement = useRef<HTMLImageElement>(null);
@@ -194,11 +182,7 @@ export const ImageContainer = <
   );
 };
 
-export const CardContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: RenderAttachmentProps<StreamChatGenerics>,
-) => {
+export const CardContainer = (props: RenderAttachmentProps) => {
   const { attachment, Card = DefaultCard } = props;
   const componentType = 'card';
 
@@ -220,12 +204,10 @@ export const CardContainer = <
   );
 };
 
-export const FileContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export const FileContainer = ({
   attachment,
   File = DefaultFile,
-}: RenderAttachmentProps<StreamChatGenerics>) => {
+}: RenderAttachmentProps) => {
   if (!attachment.asset_url) return null;
 
   return (
@@ -234,38 +216,30 @@ export const FileContainer = <
     </AttachmentWithinContainer>
   );
 };
-export const AudioContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export const AudioContainer = ({
   attachment,
   Audio = DefaultAudio,
-}: RenderAttachmentProps<StreamChatGenerics>) => (
+}: RenderAttachmentProps) => (
   <AttachmentWithinContainer attachment={attachment} componentType='audio'>
     <div className='str-chat__attachment'>
       <Audio og={attachment} />
     </div>
   </AttachmentWithinContainer>
 );
 
-export const VoiceRecordingContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export const VoiceRecordingContainer = ({
   attachment,
   isQuoted,
   VoiceRecording = DefaultVoiceRecording,
-}: RenderAttachmentProps<StreamChatGenerics>) => (
+}: RenderAttachmentProps) => (
   <AttachmentWithinContainer attachment={attachment} componentType='voiceRecording'>
     <div className='str-chat__attachment'>
       <VoiceRecording attachment={attachment} isQuoted={isQuoted} />
     </div>
   </AttachmentWithinContainer>
 );
 
-export const MediaContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: RenderAttachmentProps<StreamChatGenerics>,
-) => {
+export const MediaContainer = (props: RenderAttachmentProps) => {
   const { attachment, Media = ReactPlayer } = props;
   const componentType = 'media';
   const { shouldGenerateVideoThumbnail, videoAttachmentSizeHandler } =
@@ -318,12 +292,10 @@ export const MediaContainer = <
   );
 };
 
-export const UnsupportedAttachmentContainer = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export const UnsupportedAttachmentContainer = ({
   attachment,
   UnsupportedAttachment = DefaultUnsupportedAttachment,
-}: RenderAttachmentProps<StreamChatGenerics>) => (
+}: RenderAttachmentProps) => (
   <>
     <UnsupportedAttachment attachment={attachment} />
   </>

src/components/Attachment/Audio.tsx

@@ -5,20 +5,12 @@ import type { Attachment } from 'stream-chat';
 import { DownloadButton, FileSizeIndicator, PlayButton, ProgressBar } from './components';
 import { useAudioController } from './hooks/useAudioController';
 
-import type { DefaultStreamChatGenerics } from '../../types/types';
-
-export type AudioProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = {
+export type AudioProps = {
   // fixme: rename og to attachment
-  og: Attachment<StreamChatGenerics>;
+  og: Attachment;
 };
 
-const UnMemoizedAudio = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: AudioProps<StreamChatGenerics>,
-) => {
+const UnMemoizedAudio = (props: AudioProps) => {
   const {
     og: { asset_url, file_size, mime_type, title },
   } = props;